怎麼讓 css3 裡面的動畫屬性看起來更流暢?

ps：先說點題外話，因為工作的原因很久沒更新博客了，最近也是告一段落，處理了一些事情之後可以安心坐下來，把我的博客重新整理一下。

今天要講的是 css3 的一個新屬性 animation，也算是一個回顧吧，我只是將平時如何使用，以及一些技巧分享出來。如果想學習更基礎的內容，可以點擊鏈接：https://www.runoob.com/css3/css3-animations.html，網上類似的教程還是蠻多的。

這篇文章並不細講動畫的基礎屬性，而是稍微擴展一個話題：怎麼讓 css3 裡面的動畫屬性看起來更流暢？

當然在講之前還是要簡單介紹一下 animation 基本屬性。

animation 屬性#

animation 屬性有下面幾個值：

@keyframes | 動畫本身（最重要的）
animation-name | 動畫的名稱
animation-duration | 動畫所經歷的時間
animation-fill-mode | 當屬性為 forwards 時，動畫停留在最後一幀

動畫主要可以用於一些官網特效，或者自適應的佈局。

如何寫一個最基本的動畫#

動畫就是由一個狀態到另一個狀態的過程，比如從左到右的一個移動過程。

首先要先了解各個屬性具體的作用是什麼，就拿從白到黑舉個例子吧，首先寫一個 @keyframes 的動畫過程。

@keyframes leftright {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(100px);
    }
}

這段代碼的意思就是有一個名為 leftright 的動畫，將容器從左到右移動了 100px。

然後我們進一步補全這個動畫。

<!DOCTYPE html>
<html>
<head>
    <title>動畫</title>
    <style>
        .demo {
            width: 100px;
            height: 100px;
            background: #000;
            animation-name: leftright;
            animation-duration: 1s;
        }

        @keyframes leftright {
            0% {
                transform: translateX(0);
            }
            100% {
                transform: translateX(100px);
            }
        }
    </style>
</head>
<body>
    <div class="demo"></div>
</body>
</html>

然後我們到瀏覽器跑一下這個頁面試試看，可以看到一個黑色的方塊從左右移動了 100px 的距離，總計 1 秒完成。

但是這個動畫結束的很突兀，容器突然回到原地，這是為什麼呢？因為我們沒有保留最後一幀，這需要一個屬性，最上面我們講過了。

.demo {
    width: 100px;
    height: 100px;
    background: #fff;
    animation-name: leftright; /* 將動畫的名稱綁定到該標籤 */
    animation-duration: 1s;     /* 給動畫的過程設一個時長 */
    animation-fill-mode: forwards; /* 動畫停留在最後一幀 */
}

運行一下，可以看到動畫最後停住了。

讓動畫擁有一個慣性#

我們仔細觀察這個動畫，發現他整個過程不拖泥帶水，很迅速的完成了，但是我發現一個問題，整個過程不流暢圓滑，很死板，從左到右，一點也不圓滑。

分析一下，因為缺少了一個日常生活的習慣動畫，那就是慣性，這個屬性可不存在啊，沒法直接設置，只能通過動畫本身的屬性來進行調整，繼續看這一段代碼。

 @keyframes leftright {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(100px);
    }
}

0%代表開始，100%代表結束，他們指的是一個時間節點，在這個時間點動畫要運行到他們指定的位置。

所以我們可以添加一個新的時間節點，50%，我們讓當時間過了一半的時候，方塊運行到 120px 的位置，然後再折回來。

下面是完整的代碼，可以複製到本地，自行運行一下試試看。

<!DOCTYPE html>
<html>
<head>
    <title>動畫</title>
    <style>
        .demo {
            width: 100px;
            height: 100px;
            background: #000;
            animation-name: leftright;
            animation-duration: 1s;
            animation-fill-mode: forwards;
        }

        @keyframes leftright {
            0% {
                transform: translateX(0);
            }
            50% {
                transform: translateX(120px);
            }
            100% {
                transform: translateX(100px);
            }
        }
    </style>
</head>
<body>
    <div class="demo"></div>
</body>
</html>

修改完之後，到瀏覽器看一下效果。

是不是流暢了很多，有了一種慣性的感覺，這一點在工作中如何遇到寫動畫的需求就很關鍵了，怎麼讓用戶的體驗更強，是一門技巧。

雖說這都是一些基礎的東西，但是我覺得體驗感上去了，網站的回頭率才會更高。打個比方，去某個商城網站購物，整個頁面看起來很舒服，特效細節很流暢，是不是就增加了購物的欲望。雖然這麼說很淺薄，但是真的會有一些心理作用。

如何用好動畫特效，是一門學問，將 css 玩出花樣來，可不是那麼簡單的。