.ok{
animation-delay:2s;/*延遲幾秒才開始播放*/
animation-direction:alternate;/*往復播放*/
animation-duration:5s;/*一次動畫持續幾秒*/
animation-iteration-count:5;/*播放幾次,infinite是無限次*/
animation-name:run;/*關鍵影格名稱*/
animation-timing-function:linear;/*加速曲線*/
}
@keyframes run {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
animation-direction (反覆播放)的值有:
normal 播放一次再從頭開
reverse 反向播放,播完也是從頭開始反向播放
alternate 播完倒著播放(往復播放)
alternate-reverse 同上,只是方向反過來。
animation-timing-function (加速曲線)的值有:
animation-timing-function: ease;
animation-timing-function: ease-in;
animation-timing-function: ease-out;
animation-timing-function: ease-in-out;
animation-timing-function: linear;
更詳細可參考:MND Web Docs
補充:
如果要讓動畫停在最後一個影格,就加上以下屬性。”
animation-fill-mode: forwards;
此時動畫播放次數要設為1
animation-iteration-count:1
動畫影格可以設定多個關鍵影格,以上例子只用 from 和 to ,但還可以用%表示。
如:
@keyframes run{
20%{
opacity:1;
}
30%{
opacity:0.2;
}
70%{
opacity:0.7;
}
另外可參考無需設定關鍵影格的方式:transition 轉場/過場
可參考:CSS transform 變形、位移效果,將移動效果運用到動畫裡面。