需求：gift圖檔的小動畫每隔2s執行一次。
需求就一句話，我們看一下實作過程。
原始動畫效果為：滑鼠hover上去出現動畫。
動畫樣式如下：
效果：滑鼠hover上去gift圖檔會動一動。
需求變動，要求不再是hover上去展示動畫，而是每隔2s展示一次動畫。
思路：不需要hover上去出現動畫，就把hover去掉，每隔2s顯示一次動畫，很容易想到延遲2s,然後動畫一直執行。
此時相關樣式變成：
但是顯示的效果是：頁面加載第一次出現動畫會延遲2s，後面的動畫将不再有延遲。如下，這是不符合需求的。
為了看出效果，下圖為延遲6s的效果。
此時換種思路，不要延遲執行動畫，而是動畫的效果本身就是前2s元素不動，後1s是元素動，然後一直循環執行。 這樣在視覺上就會看起來是延遲2s執行1s動畫。
計算一下，原來的百分比節點變成了多少。
将動畫總時長變成3s，用計算出的百分比替換原來的百分比，代碼如下：
效果就是我們期望的了。
完整代碼如下：
本文隻是介紹一種思路，關于動畫各個參數詳情可參考：
<a href="http://www.cnblogs.com/starof/p/4560076.html" target="_blank">css3中變形與動畫（一）</a>
<a href="http://www.cnblogs.com/starof/p/4582367.html" target="_blank">css3中變形與動畫（二）</a>
<a href="http://www.cnblogs.com/starof/p/4585324.html" target="_blank">css3中變形與動畫（三）</a>