Question

css3 animation 如何让他停在最后

有一个下拉菜单如下。可是鼠标放上去就会出来。可是过一会儿他会收回去。
<meta charset="utf-8">
<style>
div.menu{
margin:0;
padding:0;
width:250px;
height:35px;
border:1px solid gray;
overflow:hidden;
}
div.menu a{
text-decoration:none;
text-align:center;
line-height:35px;
font-size:21px;
display:block;
width:100%;
height:35px;
background:green;
color:white;
}
div.menu:hover{
-webkit-animation:showmenu 0.5s 1;
}
@-webkit-keyframes showmenu{
100%{height:200px;}
}
</style>
<div class="menu">
<a href="#">全部分类</a>
<ul>
<li>第一条</li>
<li>第二条</li>
<li>第三条</li>
<li>第四条</li>
</ul>

Answer 1

animation-fill-mode : forwards //设置对象状态为动画结束时的状态 animation-fill-mode 语法：animation-fill-mode：none | forwards | backwards | both [ , none | forwards | backwards | both ]*默认值：none适用于：所有元素，包含伪对象:after和:before继承性：无取值：none：默认值。不设置对象动画之外的状态forwards：设置对象状态为动画结束时的状态backwards：设置对象状态为动画开始时的状态both：设置对象状态为动画结束或开始的状态说明：检索或设置对象动画时间之外的状态如果提供多个属性值，以逗号进行分隔。对应的脚本特性为animationFillMode。 这个是最简单的方法，也可以侦听动画结束事件，给元素加个class类名，这个class定义的就是元素结束时的状态的css样式

Answer 2

在这里面添加试试~
div.menu:hover{
-webkit-animation:showmenu 0.5s 1;

-webkit-animation-fill-mode:forwards;

}

Answer 3

你可以看一下，animation-fill-mode的参数，其中forwards和both都可以停在最后
例子：
animation-fill-mode：forwards；