【Hello CSS】第九章-如何畫一個體驗更好的動畫？

• 作者：陳大魚頭
• github： KRISACHAN

在上一節中， 不走心 地畫了一些 CSS圖案 ，本節就繼續不走心地 畫動畫 。

CSS的動畫屬性

在CSS中，animation 、 transition 跟 transform 使我們常用於製作動畫的屬性，我們先來大致地來了解下這三個屬性。

transform

CSS transform 屬性允許你旋轉，縮放，傾斜或平移給定元素。

這是通過修改CSS視覺格式化模型的座標空間來實現的。

transform 可以設置元素 2D 或者是 3D 的變換，其變換行爲有以下幾種：

值	描述
translate	位置移動
scale	縮放
rotate	旋轉
skew	傾斜
perspective	透視

不同值的效果如下：

地址在此：https://codepen.io/krischan77/pen/xovWMy

animation

CSS animation 是正規的CSS 動畫屬性，通過不同的值，可以畫出各種有趣的動畫。

值	說明
animation-name	指定要綁定到選擇器的關鍵幀的名稱
animation-duration	動畫指定需要多少秒或毫秒完成
animation-timing-function	設置動畫將如何完成一個週期
animation-delay	設置動畫在啓動前的延遲間隔。
animation-iteration-count	定義動畫的播放次數。
animation-direction	指定是否應該輪流反向播放動畫。
animation-fill-mode	規定當動畫不播放時（當動畫完成時，或當動畫有一個延遲未開始播放時），要應用到元素的樣式。
animation-play-state	指定動畫是否正在運行或已暫停。
initial	設置屬性爲其默認值。
inherit	從父元素繼承屬性。

小DEMO效果如下：

地址在此：

https://codepen.io/krischan77/pen/moNKgL

transition

CSS transitions 提供了一種在更改CSS屬性時控制動畫速度的方法。 其可以讓屬性變化成爲一個持續一段時間的過程，而不是立即生效的。

此屬性可以很好的配合上面兩個屬性。

值	描述
transition-property	指定CSS屬性的name，transition效果
transition-duration	transition效果需要指定多少秒或毫秒才能完成
transition-timing-function	指定transition效果的轉速曲線
transition-delay	定義transition效果開始的時候

小DEMO效果如下：

地址在此：

https://codepen.io/krischan77/pen/RzomRX

上面我們大致瞭解了三個常用於做動畫的屬性，下面我們來從實際的栗子來講解如何畫好一個動畫。

產品經理讓你畫個球

產品經理在下午5點半，正在刷某音的時候想到了一個方案，就是在明天上線的H5頁面中加個彈球的loading動畫。

產品經理說：“魚頭呀，我覺得我們的H5頁面能有個彈球的loading動畫就好了，但是明天運營部門就要推廣了，所以辛苦你一下，今晚加個班，畫一個吧！”

魚頭開（nan）心（guo）地說：“好的，馬上畫。”

然後就開始愉（shang）快（xin）地畫球。

約莫過了一個小時，終於完成了，然後高興地發了給產品經理看，效果如下：

代碼如下：

<style>
    html,
    body,
    div {
        margin: 0;
        padding: 0;
    }
    html,
    body {
        width: 100%;
        height: 100%;
    }
    .content {
        width: 300px;
        height: 600px;
        border: 1px solid;
        margin: 30px auto;
        position: relative;
    }
    .ball {
        background: skyblue;
        border-radius: 50%;
        width: 100px;
        height: 100px;
        position: absolute;
        left: calc(50% - 50px);
        animation: 3s move linear infinite;
        transform: translateY(0px);
    }
    @keyframes move {
        0% {
            transform: translateY(0px);
        }
        50% {
            transform: translateY(500px);
        }
        100% {
            transform: translateY(0px);
        }
    }
</style>
<div class="content">
    <div class="ball">
    </div>
</div>

魚頭說：“產品經理，你看下效果。”

產品經理：“這效果肯定不行啊。”

魚頭問：“爲啥？”

產品經理：“我們畫動畫的時候，要 儘可能的遵循物理世界的原則，一個可以彈跳的球，怎麼可能是這樣硬不溜秋的呢？彈跳球的彈性是非常好的，當你把球球扔到地上時，它本身會發生一個彈性形變，即變形後立刻恢復原狀，隨後它把儲存的彈性勢能裝化爲動能，就可以彈起來了。 ”

魚頭內心戲：“完全聽不懂。”

魚頭回答道：“好，我改！”

產品經理：“那就辛苦你加班了，我約了女朋友，不能加班，你單身，996都沒關係。”

魚頭此時內心毫無波瀾，甚至有點想寫代碼。

一個小時之後，魚頭又完成了一版，於是乎就錄了個GIF發給產品經理，效果如下：

核心代碼如下：

.ball {
    background: skyblue;
    border-radius: 50%;
    width: 100px;
    height: 100px;
    position: absolute;
    left: calc(50% - 50px);
    animation: 2s move linear infinite;
    transform: translateY(0px) scale(1, 1);
}
@keyframes move {
    0% {
        transform: translateY(0px) scale(1, 1);
    }
    10% {
        transform: translateY(100px) scale(1, 1);
    }
    20% {
        transform: translateY(200px) scale(1, 1);
    }
    30% {
        transform: translateY(300px) scale(1, 1);
    }
    40% {
        transform: translateY(400px) scale(1, 1);
    }
    50% {
        transform: translateY(500px) scale(1, 1);
    }
    60% {
        transform: translateY(400px) scale(1.13, 0.87);
    }
    70% {
        transform: translateY(300px) scale(0.92, 1.08);
    }
    80% {
        transform: translateY(200px) scale(1.05, 0.95);
    }
    90% {
        transform: translateY(100px) scale(0.98, 1.02);
    }
    100% {
        transform: translateY(0px) scale(1, 1);
    }
}

魚頭內心OS：“這下一定能通過了，我 利用scale的變形性，在小球下落的時候改變小球的形狀，用以模擬物理環境下彈跳球彈跳的狀態 ，我真的太聰明瞭，這樣都能讓我想到。”

魚頭笑嘻嘻地發微信給產品經理

魚頭：“產品經理，我又做好了一版，你看一下？”

產品經理：“效果不錯，但是還需要再打磨一下。”

魚頭震驚地發出：“啥？”

產品經理：“你的動畫效果是有了，但是如果能加上一些視覺上的優化，例如球體的反光，地面上的陰影或者是倒影，效果會更好。”

魚頭此時內心還是毫無波瀾，甚至有點想笑，不，他此時就是想哭。

再次度過愉快的一小時，魚頭又完成了一版

效果如下：

核心代碼如下：

.content {
    width: 300px;
    height: 600px;
    margin: 30px auto;
    position: relative;
    -webkit-box-reflect: below 0px -webkit-linear-gradient(transparent,transparent 50%, rgba(255,255,255,.6));
}
.ball {
    background: radial-gradient(circle at 40% 0, skyblue 60%, #104b63);
    border-radius: 50%;
    width: 100px;
    height: 100px;
    position: absolute;
    left: calc(50% - 50px);
    animation: 2s move linear infinite;
    transform: translateY(0px) scale(1, 1);

}
@keyframes move {
    0% {
        transform: translateY(0px) scale(1, 1);
        background: radial-gradient(circle at 40% 0, skyblue 60%, #104b63);
    }
    10% {
        transform: translateY(100px) scale(1, 1);
        background: radial-gradient(circle at 40% 0, skyblue 60%, #104b63);
    }
    20% {
        transform: translateY(200px) scale(1, 1);
        background: radial-gradient(circle at 40% 0, skyblue 60%, #104b63);
    }
    30% {
        transform: translateY(300px) scale(1, 1);
        background: radial-gradient(circle at 40% 0, skyblue 60%, #104b63);
    }
    40% {
        transform: translateY(400px) scale(1, 1);
        background: radial-gradient(circle at 40% 0, skyblue 60%, #104b63);
    }
    50% {
        transform: translateY(500px) scale(1, 1);
        background: radial-gradient(circle at 40% 0, skyblue 60%, #104b63);
    }
    60% {
        transform: translateY(400px) scale(1.13, 0.87);
        background: radial-gradient(circle at 43% 0, skyblue 57%, #104b63);
    }
    70% {
        transform: translateY(300px) scale(0.92, 1.08);
        background: radial-gradient(circle at 37% 0, skyblue 63%, #104b63);
    }
    80% {
        transform: translateY(200px) scale(1.05, 0.95);
        background: radial-gradient(circle at 42% 0, skyblue 58%, #104b63);
    }
    90% {
        transform: translateY(100px) scale(0.98, 1.02);
        background: radial-gradient(circle at 41% 0, skyblue 59%, #104b63);
    }
    100% {
        transform: translateY(0px) scale(1, 1);
        background: radial-gradient(circle at 40% 0, skyblue 60%, #104b63);
    }
}

魚頭再次內心OS：“在原來彈跳形變的基礎上，我 利用 radial-gradient 給小球底部加上了陰影，然後又利用 -webkit-box-reflect 給整個容器加上了反向的鏡像效果，這個鏡像的靈魂效果是 60% 的透明度呀，這樣看起來就更像光滑瓷磚地面的倒影。 我真是太聰明瞭，這次肯定能過了。 ”

（以上屬性在魚頭上一篇文章 『第八章-CSS圖形』都有展示DEMO，有興趣可以去看看。）

魚頭又發微信給產品經理

魚頭：“產品經理，我又做好了一版，你看一下？”

產品經理：“這次效果很好。”

產品經理：“但是，你還是忽略了兩件很重要的事。那就是 重力加速度 的表現 以及 彈力球與空氣，地面所產生的摩擦力 的表現。

彈力球下落時，由於重力加速度的原因，所以速度會越來越大，往上跳時速度會越來越小直至0。

彈力球的空氣阻力以及與地面接觸時力的損耗導致地面對彈力球自身的反作用力減少，所以，小球下次上跳的距離會比下次的小，碰到地面時的形變也是，至於這個數值是多少，你不需要深究，畢竟是虛擬的狀態，也不可能100%模擬現實環境。 ”

產品經理：“還好這次是讓你做個loading動畫，本身loading動畫就是循環性的動畫，不然我就讓你加上重力加速度跟摩擦力的損耗狀態了。”

魚頭小心翼翼地問：“那我可以回家了嗎？我肚子好餓。”

產品經理：“等下，我突然又有一個想法…”

於是乎，魚頭就這麼過了一個浪漫的夜晚。

後記

其實CSS可畫的動畫是很多的，只要我們細心的去組合不同的 CSS 屬性，就能作出很多有趣的效果。

【Hello CSS】系列

【Hello CSS】是以CSS基礎概念爲主題的系列文章，旨在幫助大家更深刻地瞭解並且提高CSS在各位開發者心目中的地位。由於魚頭我水平有限，文筆有限，如果各位在文章中發現有任何不合理，不正確的地方，還煩不吝指出，我會非常感謝的；如果通過文章有任何想法或疑問，也希望各位能積極留言，我們互相探討；如果通過本系列文章有所收穫，這就讓魚頭我喜不自勝了！

如果你也喜歡 CSS，喜歡探討技術，或者對本文，本系列有任何的意見或建議，你可以掃描下方二維碼，關注微信公衆號“ 魚頭的Web海洋 ”，隨時與魚頭互動。歡迎！衷心希望可以遇見你。