這篇文章帶給大家的內容是關於css3的動畫(animation)屬性的詳解(附程式碼),有一定的參考價值,有需要的朋友可以參考一下,希望對你有幫助。
css3動畫(animation)具有以下屬性:
1、animation-name 自訂動畫名稱
2、animation-duration 動畫指定需要多少秒或毫秒才能完成,預設值是0;
3、animation-timing-function 動畫的時間曲線,linear 勻速, ease 先慢後快,結束前變慢。
4、animation-delay 動畫在啟動前的延遲間隔,預設是0
5、animation-iteration-count 動畫的播放次數,預設為1
6、animation-direction 是否輪流反向播放動畫
7、animation-play-state 動畫是否正在運作或已暫停。 值:paused 指定暫停動畫 ; running 指定正在運作的動畫,預設。
實例:本demo以平移(translate)為例說明動畫的整個過程
html:
<body> <div class="warp"> </div> </body>
css :
.warp{ height: 100px; width: 100px; border: 1px solid #eee; animation-name:moves; animation-direction:alternate; animation-delay: 0.2s; animation-duration: 5s; animation-play-state: paused; animation-iteration-count: 3; /*以上可以简写成:*/ animation: moves 5s linear 0.2s 3; }
@keyframes moves{ /*动画名称自定义*/ 10%{ /*时间点可以任意,10%表示当时间进行到10%是元素要达到的状态*/ transform: translate(100px,0); -ms-transform:translate(100px,0); /*IE 9*/ -moz-transform:translate(100px,0); /* Firefox */ -webkit-transform:translate(100px,0); /* Safari 和 Chrome */ -o-transform:translate(100px,0); /* Opera */ } 30%{ /*时间点可以任意*/ transform: translate(100px,100px); -ms-transform:translate(100px,100px); /*IE 9*/ -moz-transform:translate(100px,100px); /* Firefox */ -webkit-transform:translate(100px,100px); /* Safari 和 Chrome */ -o-transform:translate(100px,100px); /* Opera */ } 60%{ /*时间点可以任意*/ transform: translate(0,100px); -ms-transform:translate(0,100px); /*IE 9*/ -moz-transform:translate(0,100px); /* Firefox */ -webkit-transform:translate(0,100px); /* Safari 和 Chrome */ -o-transform:translate(0,100px); /* Opera */ } 100%{ /*时间点可以任意*/ transform: translate(0,0); -ms-transform:translate(0,0); /*IE 9*/ -moz-transform:translate(0,0); /* Firefox */ -webkit-transform:translate(0,0); /* Safari 和 Chrome */ -o-transform:translate(0,0); /* Opera */ } }
相關推薦:
#以上是css3的動畫(animation)屬性的詳解(附程式碼)的詳細內容。更多資訊請關注PHP中文網其他相關文章!