CSS - 删除启动动画

在问我这个问题之前，让我解决这个问题。我不想使用jQuery。CSS - 删除启动动画

我想这个菜单，像这样的hover增长和收缩：

@keyframes menugrow { 
    0% { 
    width:25px; 
    height:25px; 
    } 
    25% { 
    width:20%; 
    height:25px; 
    } 
    100% { 
    height:100vh; 
    width:20%; 
    } 
}

，并缩小我不喜欢这样：

@keyframes menushrink { 
    0% { 
    width:20%; 
    height:100vh; 
    } 
    75% { 
    width:20%; 
    height:25px; 
    } 
    100% { 
    height:25px; 
    width:25px; 
    } 
}

而这里就是我要激活这两个：

.menu { 
    background:#1a1a1a; 
    width:25px; 
    height:25px; 
    animation: menushrink 0.3s linear; 

} 
.menu:hover { 
    animation: menugrow 0.3s linear; 
    height:100vh; 
    width:20%; 
}

我想要的只是当页面加载时没有动画。这是JSBin project。

来源

2015-08-16 justanotherbadprogrammer

有一个在我的Chrome没有启动动画。 – gzc

我在页面加载时没有收到任何启动动画。 –

没有开始动画！你使用的是什么浏览器？ –

我知道这很奇怪，我正在回答我自己的问题。

感谢@ Daemedeor，我想出了答案。 Here's the final result。我做的是我把onmouseout指向我的Javascript功能menuout()（显然你可以改变这一点，我只是选择了这个名字）。我的JavaScript代码结束了：

function menuout() { 
    document.getElementById("menu").className += " menuanimate"; 
}

而我的HTML代码为：

<!DOCTYPE html> 
<html> 
<head> 
    <title>Menu</title> 
</head> 
<body> 
    <div class="menu" onmouseout="menuout()" id="menu"> 
</div> 
</body> 
</html>

最后但并非最不重要的我的CSS：

@keyframes menugrow { 
    0% { 
    width:50px; 
    height:50px; 
    } 
    25% { 
    width:30%; 
    height:50px; 
    } 
    100% { 
    height:100vh; 
    width:30%; 
    } 
} 
@keyframes menushrink { 
    0% { 
    width:30%; 
    height:100vh; 
    } 
    75% { 
    width:30%; 
    height:50px; 
    } 
    100% { 
    height:50px; 
    width:50px; 
    } 
} 
.menu { 
    background:#1a1a1a; 
    width:50px; 
    height:50px; 
} 
.menu:hover { 
    animation: menugrow 0.3s linear; 
    height:100vh; 
    width:30%; 
} 
body { 
    margin:0px; 
} 
.menuanimate { 
    animation:menushrink 0.3s linear; 
}

来源

2015-09-20 17:26:13 justanotherbadprogrammer

CSS - 删除启动动画

回答

相关问题