看如下代码:
div {
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 3s;
animation-iteration-count:2;
animation-fill-mode:forwards;
/* Safari 和 Chrome */
-webkit-animation-iteration-count:2;
-webkit-animation:mymove 3s;
-webkit-animation-fill-mode:forwards;
-webkit-animation-delay:3s;
}
@keyframes mymove
{
from {top:0px;}
to {top:200px;}
}
@-webkit-keyframes mymove /* Safari 和 Chrome */
{
from {top:0px;}
to {top:200px;}
}
在上述代码中,div
中该样式-webkit-animation-iteration-count:2;
在Safari和Chrome中是无效的,取默认值1。因为该样式没有写在-webkit-animation:mymove 3s;
下面,也就是有顺序要求的。这点特别注意。我觉得以组合形式的顺序写比较好。即:animation: name duration timing-function delay iteration-count direction fill-mode play-state;