<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite;
-moz-animation:mymove 5s infinite; /* Firefox */
-webkit-animation:mymove 5s infinite; /* Safari and Chrome */
-o-animation:mymove 5s infinite; /* Opera */
animation-fill-mode: both;
}
@keyframes mymove
{
from {top:0px;}
to {top:200px;}
}
@-moz-keyframes mymove /* Firefox */
{
from {top:0px;}
to {top:200px;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
from {top:0px;}
to {top:200px;}
}
@-o-keyframes mymove /* Opera */
{
from {top:0px;}
to {top:200px;}
}
</style>
</head>
<body>
<p><b>注释：</b>本例在 Internet Explorer 中无效。</p>
<div></div>
</body>
</html> 这是摘自w3school的一段关于keyframes的代码，大家有兴趣的可以看一下，
http://www.w3school.com.cn/tiy/t.asp?f=css3_keyframes
大家可以看到一个红色正方形，从上方运动到下面，再快速回到上面，再按animation:5s;从上面运动到下方，这样周而复始.那么在这个里面起关键的是keyframes，定义了动画，而animation:infinite 5s；则定义了动画效果，其中infinite代表的是循环，周而复始的这个过程。去掉这个，我们则看到红色正方形缓缓下来之后再快速回到上面后就不再动了。
那么我们想使正方形运动一次后留在下面，应该如何处理，这就是animation-fill-mode的作用，我今天在teambition网站上看到了他们的导航条的效果便是利用了这个，根据w3，animation-fill-mode有四个属性，none,forwards,backwards,both，其中none和forwards使得运动物体动画结束后回到动画前的状态，而both和forwards则使运动物体在动画结束后保留动画结束前最后一帧的效果，因此如 果我们希望正方形运动一次后停在下方，则需要使用animation-fill-mode这个属性。
而alternate则是达到往返效果，我们在实现摆钟动画时往往可能需要这个，我们不可能希望摆钟从左摆到右是一个我们确定的频率，从右摆到左又是一个急速的状态，没有保持一致。这样视觉上会大打折扣，大家可以在这个红色正方形上实验一下。譬如animation:mymove 5s infinite;变为 animation:mymove 5s infinite alternate；
来实际观察一下效果。
如有问题请及时告诉我。大家共同学习啦。
版权声明：本文为博主原创文章，未经博主允许不得转载。