animation是CSS3中的一個(gè)簡(jiǎn)寫(xiě)屬性，可以通過(guò)設(shè)置六個(gè)動(dòng)畫(huà)屬性來(lái)實(shí)現(xiàn)動(dòng)畫(huà)效果。這六個(gè)屬性分別為動(dòng)畫(huà)名稱、動(dòng)畫(huà)時(shí)間、速度曲線、動(dòng)畫(huà)延遲、播放次數(shù)及動(dòng)畫(huà)是否反向播放。

語(yǔ)法：animation: name duration timing-function delay iteration-count direction;

說(shuō)明：animation 屬性可以設(shè)置的六個(gè)動(dòng)畫(huà)屬性分別為：

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

●　animation-duration：規(guī)定完成動(dòng)畫(huà)所花費(fèi)的時(shí)間，以秒或毫秒計(jì)。

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

●　animation-delay：規(guī)定在動(dòng)畫(huà)開(kāi)始之前的延遲。

●　animation-iteration-count：規(guī)定動(dòng)畫(huà)應(yīng)該播放的次數(shù)。

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

注：需始終設(shè)置 animation-duration 屬性，否則當(dāng)時(shí)長(zhǎng)為 0時(shí)，就不會(huì)播放動(dòng)畫(huà)了。

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;}

}

效果圖：

瀏覽器支持

表格中的數(shù)字表示支持該屬性的第一個(gè)瀏覽器版本號(hào)。

緊跟在 -webkit-, -ms- 或 -moz- 前的數(shù)字為支持該前綴屬性的第一個(gè)瀏覽器版本號(hào)。

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

更多CSS相關(guān)知識(shí)，可訪問(wèn) CSS教程 ！!

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。