在 CSS 中,有一種非常酷的動畫效果叫做回播(animation-direction)。這種動畫效果可以讓元素在一定時間內反復運動,就像一個來回擺動的鐘擺一樣。
回播屬性的默認值是 "normal",表示動畫將只播放一次。如果設置為 "alternate",則動畫將反復播放。例如:
.my-element { animation: my-animation 2s linear alternate; }
在上面的代碼中,動畫名稱為 "my-animation",它將在 2 秒內線性地播放。"alternate" 屬性會讓元素反復運動。
此外,我們還可以設置 "animation-iteration-count" 屬性來控制動畫播放的次數。例如:
.my-element { animation: my-animation 2s linear alternate; animation-iteration-count: 5; }
上面的代碼將使動畫只播放 5 次。
回播在 Web 開發中的運用非常廣泛,通過巧妙地運用該屬性,我們可以實現各種酷炫的動畫效果。
上一篇css動畫圍繞中心旋轉
下一篇css動畫在安卓機上兼容