溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
馬上就2020年了，不知道小伙伴們今年學習了css3動畫了嗎？
說起來css動畫是一個很尬的事，一方面因為公司用css動畫比較少，另一方面大部分開發者習慣了用JavaScript來做動畫，所以就導致了許多程序員比較排斥來學習css動畫（至少我是），但是一個不懂css動畫的前端工程師不能稱之為掌握css3，其實當你真正學習css動畫之后，你會被它的魅力所吸引的，它可以減少代碼量、提高性能。
上一篇文章我們已經一起學習了transition 的使用，如果有不了解的同學可以查看我的上一篇文章。
話不多說，馬上和我一起去學習今天的主角animation吧！
| 值 | 描述 |
|---|---|
| @keyframes | 定義一個動畫,@keyframes定義的動畫名稱用來被animation-name所使用 |
| animation-name | 檢索或設置對象所應用的動畫名稱 ,必須與規則@keyframes配合使用，因為動畫名稱由@keyframes定義 |
| animation-duration | 檢索或設置對象動畫的持續時間 |
| animation-timing-function | 檢索或設置對象動畫的過渡類型 |
| animation-delay | 檢索或設置對象動畫的延遲時間 |
| animation-iteration-count | 檢索或設置對象動畫的循環次數 |
| animation-direction | 檢索或設置對象動畫在循環中是否反向運動 |
| animation-play-state | 檢索或設置對象動畫的狀態 |
animation翻譯成中文是動畫的意思，熟練運用之后你可以用它來做各種各樣炫酷的動畫。
div{
width:50px;
height:50px;
background:#f40;
border-radius:50%;
animation:mymove 2s;
}
@keyframes mymove{
0% {width:50px;height:50px;}
50% {width:100px;height:100px;}
100% {width:50px;height:50px;}
}
web前端開發學習Q-q-u-n： 767273102 ，分享學習的方法和需要注意的小細節，不停更新最新的教程和學習方法（詳細的前端項目實戰教學視頻）@keyframes主要是做關鍵幀動畫的，每個@keyframes后面都要跟一個名字，事例中使用了mymove作為幀動畫的名字，然后可以在樣式內對關鍵幀添加樣式，然后根據關鍵幀 @keyframes就能自動形成流暢的動畫了。
div{
width:50px;
height:50px;
background:#f40;
border-radius:50%;
animation-name:mymove;
animation-duration:2s;
}
@keyframes mymove{
0% {width:50px;height:50px;}
50% {width:100px;height:100px;}
100% {width:50px;height:50px;}
}
web前端開發學習Q-q-u-n： 767273102 ，分享學習的方法和需要注意的小細節，不停更新最新的教程和學習方法（詳細的前端項目實戰教學視頻）在animation-name使用之前，我們已經定義了一個名為mymove的幀動畫，這里把幀動畫的名字作為了animation-name的值，含義是當前元素將執行所設置的幀動畫。
繼續看上一個案例，僅僅有幀動畫和需要執行的動畫名稱是不足以形成動畫的，我們還需要設置一個動畫執行所需要的時間，這里就用到了animation-duration屬性，所以上一案例所展示的時間為兩秒鐘執行一次。
div{
width:100px;
height:50px;
background:#f40;
position:relative;
animation-name:mymove;
animation-duration:3s;
animation-timing-function:ease-in-out;
}
@keyframes mymove{
0% {left:0px;}
100% {left:300px;}
}animation-timing-function的作用就是改變動畫在每一幀的快慢。這里transition-timing-function僅展示值為ease-in-out的動畫效果，可以理解為慢-快-慢。其他的不做展示，可以參考下表進行理解。
| 值 | 描述 |
|---|---|
| linear | 動畫從頭到尾的速度是相同的。 |
| ease | 默認。動畫以低速開始，然后加快，在結束前變慢。 |
| ease-in | 動畫以低速開始。 |
| ease-out | 動畫以低速結束。 |
| ease-in-out | 動畫以低速開始和結束。 |
| cubic-bezier(n,n,n,n) | 在 cubic-bezier 函數中自己的值。可能的值是從 0 到 1 的數值。 |
div{
width:50px;
height:50px;
background:#f40;
border-radius:50%;
animation-name:mymove;
animation-duration:2s;
animation-delay:2s;
}
@keyframes mymove{
0% {width:50px;height:50px;}
50% {width:100px;height:100px;}
100% {width:50px;height:50px;}
}
web前端開發學習Q-q-u-n： 767273102 ，分享學習的方法和需要注意的小細節，不停更新最新的教程和學習方法（詳細的前端項目實戰教學視頻）這里animation-delay的值為2s，意思是動畫將在延遲兩秒秒后延遲執行。
div{
width:50px;
height:50px;
background:#f40;
border-radius:50%;
animation-name:mymove;
animation-duration:2s;
animation-iteration-count:infinite;
}
@keyframes mymove{
0% {width:50px;height:50px;}
50% {width:100px;height:100px;}
100% {width:50px;height:50px;}
}這里animation-iteration-count的值為infinite，意思是動畫將會無限次的執行，這也就達到了循環的效果，當然你還可以給它具體的數值，當執行你設置的次數后它會自動停止。
div{
width:100px;
height:50px;
background:#f40;
position:relative;
animation-name:mymove;
animation-duration:2s;
animation-iteration-count:infinite;
animation-direction:alternate;
}
@keyframes mymove{
0% {left:0px;}
100% {left:300px;}
}
web前端開發學習Q-q-u-n： 767273102 ，分享學習的方法和需要注意的小細節，不停更新最新的教程和學習方法（詳細的前端項目實戰教學視頻）這里animation-direction的值為alternate，代表動畫將會來回的反復執行，他還有其它屬性，在下表給出供小伙伴們自己嘗試。
| 值 | 描述 |
|---|---|
| normal | 默認值。動畫按正常播放。 |
| reverse | 動畫反向播放。 |
| alternate | 動畫在奇數次（1、3、5...）正向播放，在偶數次（2、4、6...）反向播放。 |
| alternate-reverse | 動畫在奇數次（1、3、5...）反向播放，在偶數次（2、4、6...）正向播放。 |
| initial | 設置該屬性為它的默認值。 |
| inherit | 從父元素繼承該屬性。 |
<style>
div{
width:50px;
height:50px;
background:#f40;
border-radius:50%;
animation-name:mymove;
animation-duration:2s;
animation-iteration-count:infinite;
}
@keyframes mymove{
0% {width:50px;height:50px;}
50% {width:100px;height:100px;}
100% {width:50px;height:50px;}
}
</style>
<body>
<button onclick="pause()">暫停</button>
<button onclick="run()">恢復</button>
<div></div>
</body>function pause(){
document.querySelector('div').style.animationPlayState="paused"
}
function run(){
document.querySelector('div').style.animationPlayState="running"
}animation-play-state的默認值為running，就是動畫執行的意思，在實際應用中我們經常使用js來操作這個屬性，從而控制動畫的播放和暫停。
今天我們一共學習了八個屬性值，他們都是屬于animation屬性的，這里給出屬性值在animation中的簡寫方式。
animation: name duration timing-function delay iteration-count direction play-state;
div{
animation:mymove 2s ease-in-out 3s infinite alternate running;
}
web前端開發學習Q-q-u-n： 767273102 ，分享學習的方法和需要注意的小細節，不停更新最新的教程和學習方法（詳細的前端項目實戰教學視頻）那么這里的意思就是mymove動畫將在三秒鐘后開始，以兩秒一個循環慢-快-慢方式，進行動畫的展示，并且每次動畫過后都會向相反方向執行動畫。
經過以上的學習，相信你已經初步了解了animation的用法，隨著你對animation的深入理解，是可以做一些有創造性的動畫的，你可以看看自己之前用js寫的各種動畫，嘗試著用我們兩篇文章所學的內容進行修改，相信你一定會對這兩個屬性有更深的理解。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
