動(dòng)畫(huà)效果，體驗(yàn)animation的魅力

animation

也是css3屬性的一員

animation: name duration timing-function delay iteration-count direction; 包括： 動(dòng)畫(huà)名， 完成一次動(dòng)畫(huà)所需要的時(shí)間， 動(dòng)畫(huà)速度函數(shù)(linear,ease等)， 動(dòng)畫(huà)開(kāi)始之前的延時(shí)， 動(dòng)畫(huà)執(zhí)行的次數(shù)（默認(rèn)是1，常用inifite） 規(guī)定是否應(yīng)該輪流反向播放動(dòng)畫(huà)。（默認(rèn)是normal，alternate代表完成動(dòng)畫(huà)一次需要返回去一次）//必須要的兩個(gè)屬性，即動(dòng)畫(huà)名和完成動(dòng)畫(huà)所需要的時(shí)間 animation: name duration;

360度旋轉(zhuǎn)小案例

• html

<img src="T001.jpg" />

• css

img {border-radius: 50%;animation: rotateArround 3.5s linear 3s infinite alternate;-webkit-animation: rotateArround 3.5s linear 3s infinite alternate;-moz-animation: rotateArround 3.5s linear 3s infinite;-ms-animation: rotateArround 3.5s linear 3s infinite;-o-animation: rotateArround 3.5s linear 3s infinite; }@keyframes rotateArround {from {transform: rotateZ(0deg);}to {transform: rotateZ(360deg);} }@-webkit-keyframes rotateArround {from {-webkit-transform: rotate(0deg);}to {-webkit-transform: rotate(360deg);} }@-moz-keyframes rotateArround {from {-moz-transform: rotate(0deg);}to {-moz-transform: rotate(360deg);} }@-ms-keyframes rotateArround {from {-ms-transform: rotate(0deg);}to {-ms-transform: rotate(360deg);} }@-o-keyframes rotateArround {from {-o-transform: rotate(0deg);}to {-o-transform: rotate(360deg);} }

總結(jié)

以上是生活随笔為你收集整理的动画练习-360度旋转-animation的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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