你所不知道的 CSS 動畫技巧與細節

怕標題起的有點大，下述技巧如果你已經掌握了看看就好，歡迎斧正，本文希望通過介紹一些 CSS 不太常用的技巧，輔以一些實踐，讓讀者可以更加深入的理解掌握 CSS 動畫。

廢話少說，直接進入正題，本文提到的動畫不加特殊說明，皆指 CSS 動畫。

正負旋轉相消

嗯。名字起的很奇怪，好像數學概念一樣。

加群六二三九六六八零六 免費領取前端學習資料，群里還有大神解答問題和交流

（寫完文章才發現這裡應該叫 正反旋轉相消， 圖都截完了，大家心裡清楚就好）

在動畫中，旋轉是非常常用的屬性，

{ transform: rotate(90deg);

}

那旋轉有一些什麼高級點的技巧呢？當然是可以改變 transfrom-origin ，改變旋轉中心點啦。

開個玩笑，改變旋轉中心點這個估計大家都知道了，這裡要介紹的技巧是利用父級元素正反兩個方向的旋轉，來製作一些酷炫的 3d 效果。

首先假設一下場景，我們有這樣的一層 HTML 結構：

正負旋轉相消3D動畫

樣式如下：

.content 內是我們的主要內容，好了，現在想像一下，如果祖先元素 .rotate 進行正向 linear 360° 旋轉，父級元素 .reverseRotate 進行反向 linear 360° 旋轉，效果回是啥樣？

CSS 代碼如下：

.rotate { animation: rotate 5s linear infinite;

}.reverseRotate { animation: reverseRotate 5s linear infinite;

}

@keyframes rotate {

100% { transform: rotate(360deg);

}

}

@keyframes reverseRotate {

100% { transform: rotate(-360deg);

}

}

神奇！因為一正一反的旋轉，且緩動函數一樣，所以整個 content 看上去依然是靜止的！注意，這裡整個 content 靜止的非常重要。

有讀者看到這裡就要罵街了，作者你個智障，靜止了不就沒動畫了嗎？哪來的動畫技巧？

別急！雖然看上去是靜止的，但是其實祖先兩個元素都是在旋轉的！這會看上去風平浪靜的效果底下其實是暗流涌動。用開發者工具選取最外層祖先元素是這樣的：

GIF/981K

既然如此，我們繼續思考，如果我在其中旋轉的一個祖先元素上，添加一些別的動畫會是什麼效果？想想就很刺激啊。

為了和文案裡面的 3D 動畫扯上關係，我們先給這幾個元素添加 3D 轉換：

div { transform-style: preserve-3d; perspective: 500px;

}

接著，嘗試修改上面的旋轉動畫，在內層旋轉上額外添加一個 rotateX：

@keyframes rotate {

0% { transform: rotateX(0deg) rotateZ(0deg);

}

50% { transform: rotateX(40deg) rotateZ(180deg);

}

100% { transform: rotateX(0deg) rotateZ(360deg);

}

}

效果如下：

GIF/621K

Wow，這裡需要好好理解一下。由於內容 content 層是靜止的但其實外層兩個圖層都在旋轉，通過設置額外的 rotateX(40deg) ，相當於疊加多了一個動畫，由於正反旋轉抵消了，所有整個動畫只能看到旋轉的 rotateX(40deg) 這個動畫，產生了上述的效果。

CodePen Demo -- Css正負旋轉相消動畫

動畫相同，緩動不同

好的，繼續下一個小技巧。

有的時候我們頁面存在一些具有相同動畫的元素，為了讓動畫不那麼死板，我們可以給相同的動畫，賦予不同的緩動函數，來達到動畫效果。

假設我們有如下的結構：

樣式如下：

我們給它們相同的動畫，但是賦予不一樣的緩動函數（animation-timing-function），就像這樣：

.ball1 { animation: move 1s ease-in infinite alternate;

}.ball2 { animation: move 1s linear infinite alternate;

}.ball3 { animation: move 1s ease-out infinite alternate;

}

@keyframes move {

100% { transform: translateY(5vw);

}

}

這樣，一個簡單的 loading 效果就製作好了。（當然這個技巧比較簡單，學會合理運用是關鍵）

GIF/116K

CodePen Demo -- 動畫相同，緩動不同

奇妙的緩動

緩動函數 timing-function 在動畫中佔據了非常重要的地位。

當你不想使用 CSS 默認提供的 linear 、 ease-in 、 ease-out 之類緩動函數的，可以自定義 cubic-bezier(1, 1, 0, 0) ，這裡有個非常好用的工具推薦，下面這個網站，可以方便的調出你需要的緩動函數並且拿到對應的 cubic-bezier 。

cubic-bezier.com

過渡取消

我們在製作頁面的時候，為了讓頁面更加有交互感，會給按鈕，陰影，顏色等樣式添加過渡效果，配合 hover 一起使用。

這個是常規思維，如果我們的元素一開始是沒有過渡效果，只有 hover 上去才給它添加一個過渡，又或者一開始元素是有過渡效果的，當我們 hover 上去時，取消它的過渡，會碰撞出什麼樣的火花呢？

使用這個技巧（也許算不上技巧，純粹好玩），我們可以製作出一些有趣的效果，例如下面這個感覺是利用就 JS 才完成的動畫，其實是純 CSS 動畫：

GIF/1.5M

其實就小圓圈是元素默認是帶有 transition 的，只有在 hover 上去的時候，取消它的過渡，簡單的過程：

由於一開始它的顏色的透明的，而 hover 的時候會賦予它顏色值，但是由於 hover 時過渡被取消了，所有它會直接顯示。

hover 離開的時候，它的原本的過渡又回來了，這個時候它會從有顏色到透明值緩慢漸變消失。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！