.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 變形、位移效果，將移動效果運用到動畫裡面。