<!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；
來實際觀察一下效果。
如有問題請及時告訴我。大家共同學習啦。
