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

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

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

CSS的動畫屬性

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

transform

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

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

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

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

不一樣值的效果以下：

地址在此：codepen.io/krischan77/…

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效果以下：

地址在此：

codepen.io/krischan77/…

transition

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

此屬性能夠很好的配合上面兩個屬性。

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

小DEMO效果以下：

地址在此：

codepen.io/krischan77/…

上面咱們大體瞭解了三個經常使用於作動畫的屬性，下面咱們來從實際的栗子來說解如何畫好一個動畫。

產品經理讓你畫個球

產品經理在下午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海洋」，隨時與魚頭互動。歡迎！衷心但願能夠碰見你。