例：

-webkit-animation: myfirst 5s linear 2s infinite alternate; animation: myfirst 5s linear 2s infinite alternate;

@keyframes myfirst{
　　from{background:red;}
　　to{background:yellow;}
}
@-webkit-keyframes myfirst{
　　frome{background:red;}
　　to{background:yellow;}
}
//或者
@keyframes myfirst{
　　0%{ }
　　25%{ }
　　50%{ }
　　100%{ }
}

?參數及含義：

animation-name: 動畫的名字

animation-duration: 動畫完成一個周期所花費的秒數，默認是0

animation-timing-function: 規定動畫的速度曲線，默認是ease(動畫以低速開始，然后加塊，在結束前變慢)；

　　　　　　　　　　　　　　linear(動畫從頭到尾的速度是相同的)

　　　　　　　　　　　　　　ease-in(動畫以低速開始)

　　　　　　　　　　　　　　ease-out(動畫以低速結束)

　　　　　　　　　　　　　　ease-in-out(動畫以低速開始和結束)

animation-delay: 規定動畫何時開始，默認是0；

animation-iteration-count: 規定動畫被播放的次數，默認是1， infinite(無限循環)

animation-direction: 規定動畫是否在下一周期逆向地播放，默認是normal（不逆向播放）

　　　　　　　　　　　　reverse(動畫反向播放)

　　　　　　　　　　　　alternate(動畫在奇數1,3,5、、、正向播放，在偶數2,4,5、、、反向播放)　

　　　　　　　　　　　　alternate-reverse(動畫在奇數次1,3,4、、、反向播放，在偶數次2,4,6、、、正向播放)　

轉載于:https://www.cnblogs.com/baixuemin/p/6490222.html

總結

以上是生活随笔為你收集整理的css3动画：animation的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。