巧用 transition 實現短視訊 APP 點贊動畫

在各種短視訊介面上，我們經常會看到類似這樣的點贊動畫：

非常的有意思，有意思的互動會讓使用者更願意進行互動。

那麼，這麼有趣的點贊動畫，有沒有可能使用純 CSS 實現呢？那當然是必須的，本文，就將巧妙的藉助 transition，僅僅使用 CSS 完成這麼一個點贊動畫。

實現不同表情的不斷上升

如果使用純 CSS 實現這一整套動畫的話。我們首先需要實現一段無限迴圈的，大量不同的表情不斷向上漂浮的動畫。

像是這樣：

這個整體還是比較容易實現的，核心原理就是同一個動畫，設定不同的 transition-duration，transition-dalay，和一定範圍內的旋轉角度。

我們首先要實現多個表情，一個 DOM 標籤放入一個隨機的表情。

我們可以手動一個一個的新增：

<ul class="g-wrap">
    <li>