溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下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指定正在運行的動畫，默認。
代碼實例（以平移--translate為例說明動畫的整個過程）：
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title></title>
<style>
.warp{
height:100px;
width:100px;
border:1pxsolid#eee;
background-color:#21B4BB;
animation-name:moves;
animation-direction:alternate;
animation-delay:0.2s;
animation-duration:5s;
animation-play-state:paused;
animation-iteration-count:3;
/*以上可以簡寫成：*/
animation:moves5slinear0.2s3;
}
@keyframesmoves{
/*動畫名稱自定義*/
10%{
background-color:#21B4BB;
/*時間點可以任意，10%表示當時間進行到10%是元素要達到的狀態*/
transform:translate(100px,0);
-ms-transform:translate(100px,0);
/*IE9*/
-moz-transform:translate(100px,0);
/*Firefox*/
-webkit-transform:translate(100px,0);
/*Safari和Chrome*/
-o-transform:translate(100px,0);
/*Opera*/
}
30%{
background-color:#008000;
/*時間點可以任意*/
transform:translate(100px,100px);
-ms-transform:translate(100px,100px);
/*IE9*/
-moz-transform:translate(100px,100px);
/*Firefox*/
-webkit-transform:translate(100px,100px);
/*Safari和Chrome*/
-o-transform:translate(100px,100px);
/*Opera*/
}
60%{
background-color:#444444;
/*時間點可以任意*/
transform:translate(0,100px);
-ms-transform:translate(0,100px);
/*IE9*/
-moz-transform:translate(0,100px);
/*Firefox*/
-webkit-transform:translate(0,100px);
/*Safari和Chrome*/
-o-transform:translate(0,100px);
/*Opera*/
}
100%{
background-color:#70DBDB;
/*時間點可以任意*/
transform:translate(0,0);
-ms-transform:translate(0,0);
/*IE9*/
-moz-transform:translate(0,0);
/*Firefox*/
-webkit-transform:translate(0,0);
/*Safari和Chrome*/
-o-transform:translate(0,0);
/*Opera*/
}
}
</style>
</head>
<body>
<divclass="warp">
</div>
</body>
</html>
以上是“css3如何實現animation效果”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
