前端深入之css篇丨2020年，徹底掌握css動畫【animation】

不是酸檸檬發表於2019-10-21
前端CSS動畫

寫在前面

已經2020年了，不知道小夥伴們今年學習了css3動畫了嗎？

說起來css動畫是一個很尬的事，一方面因為公司用css動畫比較少，另一方面大部分開發者習慣了用JavaScript來做動畫，所以就導致了許多程式設計師比較排斥來學習css動畫（至少我是），但是一個不懂css動畫的前端工程師不能稱之為掌握css3，其實當你真正學習css動畫之後，你會被它的魅力所吸引的，它可以減少程式碼量、提高效能。

這是一個系列文章，共分為四篇。

前端深入之css篇丨2020年，徹底掌握css動畫【transition】

前端深入之css篇丨2020年，徹底掌握css動畫【animation】

前端深入之css篇丨2020年，徹底掌握css動畫【transform】

前端深入之css篇丨初探【transform】，手把手帶你實現1024程式設計師節動畫

這一文章的前置知識為transition ，如果有不瞭解的同學可以點選對應連結學習。

話不多說，馬上和我一起去學習今天的主角animation吧！

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翻譯成中文是動畫的意思，熟練運用之後你可以用它來做各種各樣炫酷的動畫。

@keyframes：定義一個動畫，定義的動畫名稱用來被animation-name所使用。

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;}
}
複製程式碼

@keyframes主要是做關鍵幀動畫的，每個@keyframes後面都要跟一個名字，事例中使用了mymove作為幀動畫的名字，然後可以在樣式內對關鍵幀新增樣式，然後根據關鍵幀 @keyframes就能自動形成流暢的動畫了。

animation-name：檢索或設定物件所應用的動畫名稱 ,必須與規則@keyframes配合使用，因為動畫名稱由@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;}
}
複製程式碼

在animation-name使用之前，我們已經定義了一個名為mymove的幀動畫，這裡把幀動畫的名字作為了animation-name的值，含義是當前元素將執行所設定的幀動畫。

animation-duration：檢索或設定物件動畫的持續時間

繼續看上一個案例，僅僅有幀動畫和需要執行的動畫名稱是不足以形成動畫的，我們還需要設定一個動畫執行所需要的時間，這裡就用到了animation-duration屬性，所以上一案例所展示的時間為兩秒鐘執行一次。

animation-timing-function：檢索或設定物件動畫的過渡型別

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 的數值。

animation-delay：檢索或設定物件動畫的延遲時間

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;}
}
複製程式碼

這裡animation-delay的值為2s，意思是動畫將在延遲兩秒秒後延遲執行。

animation-iteration-count：檢索或設定物件動畫的迴圈次數

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，意思是動畫將會無限次的執行，這也就達到了迴圈的效果，當然你還可以給它具體的數值，當執行你設定的次數後它會自動停止。

animation-direction：檢索或設定物件動畫在迴圈中是否反向運動

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;}
}
複製程式碼

這裡animation-direction的值為alternate，代表動畫將會來回的反覆執行，他還有其它屬性，在下表給出供小夥伴們自己嘗試。

值 描述
normal 預設值。動畫按正常播放。
reverse 動畫反向播放。
alternate 動畫在奇數次（1、3、5...）正向播放，在偶數次（2、4、6...）反向播放。
alternate-reverse 動畫在奇數次（1、3、5...）反向播放，在偶數次（2、4、6...）正向播放。
initial 設定該屬性為它的預設值。
inherit 從父元素繼承該屬性。

animation-play-state：檢索或設定物件動畫的狀態

<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;
}
複製程式碼

那麼這裡的意思就是mymove動畫將在三秒鐘後開始，以兩秒一個迴圈慢-快-慢方式，進行動畫的展示，並且每次動畫過後都會向相反方向執行動畫。

結論

經過以上的學習，相信你已經初步瞭解了animation的用法，隨著你對animation的深入理解，是可以做一些有創造性的動畫的，你可以看看自己之前用js寫的各種動畫，嘗試著用我們兩篇文章所學的內容進行修改，相信你一定會對這兩個屬性有更深的理解。

但是現在我們只是學會了過渡和動畫，我們現在還不能對圖形進行一系列的不規則操作，而transform（變形）就是來操作改變成特殊圖形的，我將在接下來的文章繼續為你講解translate（移動）以及transform（變形），跟進我的腳步吧，跟我一起在2020年掌握css動畫！

結語

以上就是本文章的全部內容了，如果有不正確的地方歡迎指正。

感謝您的閱讀，如果感覺有用不妨點贊/轉發。

前端深入系列是一個踩坑系列，是由我本人對工作和學習中所遇到的問題和踩過的坑的一個探索與總結，在此記錄分享出去，同時也是對自我技能的一個反思和追問。

前端路漫，踩坑不斷。

前端深入系列持續更新中……

以上2019-10-24。

相關文章