css3的動畫(animation)屬性的詳解（附程式碼）
- 不言原創
- 2018-08-10 10:11:312267瀏覽
這篇文章帶給大家的內容是關於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中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn