動畫效果，體驗animation的魅力

animation

也是css3屬性的一員

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

360度旋轉小案例

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

總結

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

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