以下討論的是和css3 動畫 屬性 animation 相關的css3中的動畫屬性animation應用場景及編寫代碼教程教程文章，內容是本站精心挑選整理的教程，希望對廣大的網(wǎng)友給到幫助,下面是詳細內容：
講解一下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 動畫的播放次數(shù)，默認是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%是元素要達到的狀態(tài)*/ 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應用場景及編寫代碼教程文章就講到這里，歡迎瀏覽本站的其它內容，點擊這里返回首頁
新聞熱點
疑難解答
