摘要：那就是重力加速度的表現以及彈力球與空氣，地面所產生的摩擦力的表現。彈力球下落時，由于重力加速度的原因，所以速度會越來越大，往上跳時速度會越來越小直至。

作者：陳大魚頭
github： KRISACHAN

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

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

CSS transform 屬性允許你旋轉，縮放，傾斜或平移給定元素。
這是通過修改CSS視覺格式化模型的坐標空間來實現的。

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

不同值的效果如下：

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

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

小DEMO效果如下：

地址在此：

https://codepen.io/krischan77...

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

小DEMO效果如下：

地址在此：

https://codepen.io/krischan77...

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

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

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

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

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

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

代碼如下：

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

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

魚頭問：“為啥？”

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

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

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

產品經理：“那就辛苦你加班了，我約了女朋友，不能加班，你單身，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】是以CSS基礎概念為主題的系列文章，旨在幫助大家更深刻地了解并且提高CSS在各位開發者心目中的地位。由于魚頭我水平有限，文筆有限，如果各位在文章中發現有任何不合理，不正確的地方，還煩不吝指出，我會非常感謝的；如果通過文章有任何想法或疑問，也希望各位能積極留言，我們互相探討；如果通過本系列文章有所收獲，這就讓魚頭我喜不自勝了！

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