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

作者：陳大魚頭
github： KRISACHAN

在上一節(jié)中， 不走心 地畫了一些 CSS圖案 ，本節(jié)就繼續(xù)不走心地 畫動畫 。

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

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

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

不同值的效果如下：

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

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

小DEMO效果如下：

地址在此：

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

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

小DEMO效果如下：

地址在此：

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

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

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

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

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

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

約莫過了一個小時，終于完成了，然后高興地發(fā)了給產(chǎn)品經(jīng)理看，效果如下：

代碼如下：

魚頭說：“產(chǎn)品經(jīng)理，你看下效果?！?/p>

產(chǎn)品經(jīng)理：“這效果肯定不行啊。”

魚頭問：“為啥？”

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

魚頭內(nèi)心戲：“完全聽不懂?！?/p>

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

產(chǎn)品經(jīng)理：“那就辛苦你加班了，我約了女朋友，不能加班，你單身，996都沒關(guān)系?！?/p>

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

一個小時之后，魚頭又完成了一版，于是乎就錄了個GIF發(fā)給產(chǎn)品經(jīng)理，效果如下：

核心代碼如下：

.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);
    }
}

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

魚頭笑嘻嘻地發(fā)微信給產(chǎn)品經(jīng)理

魚頭：“產(chǎn)品經(jīng)理，我又做好了一版，你看一下？”

產(chǎn)品經(jīng)理：“效果不錯，但是還需要再打磨一下。”

魚頭震驚地發(fā)出：“啥？”

產(chǎn)品經(jīng)理：“你的動畫效果是有了，但是如果能加上一些視覺上的優(yōu)化，例如球體的反光，地面上的陰影或者是倒影，效果會更好?！?/p>

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

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

效果如下：

核心代碼如下：

.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);
    }
}

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

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

魚頭又發(fā)微信給產(chǎn)品經(jīng)理

魚頭：“產(chǎn)品經(jīng)理，我又做好了一版，你看一下？”

產(chǎn)品經(jīng)理：“這次效果很好?！?/p>

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

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

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

產(chǎn)品經(jīng)理：“還好這次是讓你做個loading動畫，本身loading動畫就是循環(huán)性的動畫，不然我就讓你加上重力加速度跟摩擦力的損耗狀態(tài)了。”

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

產(chǎn)品經(jīng)理：“等下，我突然又有一個想法.....”

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

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

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

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