溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下css3實現動畫效果的方法，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！
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為例說明動畫的整個過程）：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.warp {
height: 100px;
width: 100px;
border: 1px solid #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: moves 5s linear 0.2s 3;
}
@keyframes moves {
/*動畫名稱自定義*/
10% {
background-color: #21B4BB;
/*時間點可以任意，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% {
background-color: #008000;
/*時間點可以任意*/
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% {
background-color: #444444;
/*時間點可以任意*/
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% {
background-color: #70DBDB;
/*時間點可以任意*/
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 */
}
}
</style>
</head>
<body>
<div class="warp">
</div>
</body>
</html>效果圖：
看完了這篇文章，相信你對css3實現動畫效果的方法有了一定的了解，想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
