animation是CSS3中的一個簡寫屬性，可以通過設置六個動畫屬性來實現動畫效果。這六個屬性分別為動畫名稱、動畫時間、速度曲線、動畫延遲、播放次數及動畫是否反向播放。

語法：animation: name duration timing-function delay iteration-count direction;

說明：animation 屬性可以設置的六個動畫屬性分別為：

●　animation-name：規(guī)定需要綁定到選擇器的 keyframe 名稱。

●　animation-duration：規(guī)定完成動畫所花費的時間，以秒或毫秒計。

●　animation-timing-function ：規(guī)定動畫的速度曲線。

●　animation-delay：規(guī)定在動畫開始之前的延遲。

●　animation-iteration-count：規(guī)定動畫應該播放的次數。

●　animation-direction：規(guī)定是否應該輪流反向播放動畫。

注：需始終設置 animation-duration 屬性，否則當時長為 0時，就不會播放動畫了。

css3 animation屬性的使用示例

div

{

width:100px;

height:100px;

background:red;

position:relative;

animation:mymove 5s infinite;

-webkit-animation:mymove 5s infinite; /*Safari and Chrome*/

}

@keyframes mymove

{

from {left:0px;}

to {left:200px;}

}

@-webkit-keyframes mymove /*Safari and Chrome*/

{

from {left:0px;}

to {left:200px;}

}

效果圖：

瀏覽器支持

表格中的數字表示支持該屬性的第一個瀏覽器版本號。

緊跟在 -webkit-, -ms- 或 -moz- 前的數字為支持該前綴屬性的第一個瀏覽器版本號。

Internet Explorer 9 以及更早的版本不支持 animation 屬性。

更多CSS相關知識，可訪問 CSS教程 ！!

總結

以上是生活随笔為你收集整理的html css animation,css animation是什么？的全部內容，希望文章能夠幫你解決所遇到的問題。

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