10分鐘入門CSS3 Animation

2024-07-11 08:59:45

字體：大中小

來源：轉載

供稿：網友

簡介

Animation可以讓你不用依賴javascript或jquery，用純CSS在網頁中輕松實現各種動畫效果。

兼容性

animation在絕大部分主流瀏覽器都得到了很好的支持！還在兼容IE9的同學要謹慎使用。

CSS 坐標系

在了解animtion之前，我們有必要先了解css的坐標系，因為很多的animation效果都和元素的坐標密切相關。在css3中網頁不再是一個二維平面，而是一個三維空間，水平方向、豎直方向和垂直屏幕方向分別對應三維坐標系的x，y，z軸，如下圖所示。箭頭方向為正向，反之為負向（注意y軸方向與常規笛卡爾坐標系相反）。

Animations

1. Transforms

transform中文譯為“轉換”，但我更傾向于稱呼它“變形”（大名鼎鼎的變形金剛叫transformer）。我們可以使用transform function使html元素產生各種各樣的變形，比如平移、縮放、旋轉、扭曲等，而且不會影響正常的文檔流（document flow）。

(1) Translate

Translate一般譯為“翻譯”，但在css里面一般用作“平移”，因為translate用于改變html元素的在3d坐標系位置。translate支持在坐標系內任意方向移動（通過任意組合x、y、z方向的向量），單位可以是長度單位和百分比（百分比是相對于被平移的元素自身尺寸，x軸是相對于width，y軸是相對于height，而在z軸方向由于元素是沒有‘厚度’的，所以對于z方向不能用百分比表示），例如：

transform: translateX(100px) translateY(50%) translateZ(-100px);// 或者簡寫transform: translate3d(100px, 50%, 2em);

注意：

translate是xy平面內的2維平移，translate3d是xyz空間內的三維平移；

translate也可以單獨書寫，如 translate: 50% 105px 5rem;，但是該特性尚在實驗階段，很多瀏覽器不支持，所以現階段還是配合transform使用。詳情參考MDN translate。

(2) Scale

Scale意為“縮放”，顧名思義，是用于改變元素的大小。例如：

transform: scaleX(2) scaleY(0.5) scaleZ(1);// 或者簡寫transform: scale3d(2, 0.5, 1);

scale方法接收任意數字（正負整數、小數、0）作為參數，該參數為縮放系數，系數>1 效果為放大，0<系數<1 效果為縮小，系數=0 元素尺寸變為無限小而不可見，系數<0 效果為 >0 時的鏡像（具體效果可自己實驗）。

與translate類似，scale也有2維 scale() 和三維 scale3d()之分，也可以單獨書寫，此處不贅述。

(3) Rotate

Rotate意為“旋轉”，支持將元素以x、y、z為軸旋轉，旋轉正方向為面朝坐標軸正向逆時針方向，可參考上面坐標系示意圖。rotate方法接收一個角度作為參數，角度>0 正向旋轉，角度<0 負向旋轉，例如：

// 默認繞z軸旋轉transform: rotate(90deg);transform: rotateX(30deg) rotateY(60deg) rotateZ(-90deg);

與translate和scale不同，rotate不能簡寫為transform: rotate3d(30deg, 60deg, 90deg)的形式，rotate3d的用法為：前三個參數為數字，代表x、y、z方向的向量，相加得到向量v，第四個參數為角度，表示以向量v為軸逆時針旋轉的角度，語法如下：

transform: rotate3d(1, 2, 3, 90deg);

與translate和scale類似，rotate也可以作為單獨的css屬性，但還在實驗階段。

出于篇幅考慮，我只列出三種最常用的tranform function，剩下的transform function請參考 MDN transform function。

(4) 組合

我們可以將不同的transform方法組合起來使用，如：

transform: translateY(200px) rotateZ(90deg) scale(3);

組合方法的執行順序是從右往左，即先執行scale，然后rotate，最后translate，產生的效果是逐次累加的。方法書寫的順序對最后效果有很大的影響，看下面例子，沿y軸平移和放大，順序不同，產生的結果有明顯差別：

如果先translate再scale，平移的距離也將被等比例縮放，而先scale再translate則不會。所以在使用transform需按照 translate -> rotate -> scale 的順序書寫，讓scale先執行，以免放大translate的效果，而rotate先translate執行以防止帶著平移的距離一起轉動。我覺得這是transform目前不方便的地方，因為方法之間相互干擾并不容易理解，書寫順序也不容易記住。在未來有望通過使用獨立的css transform屬性解決這一問題，因為獨立的transform屬性對書寫順序沒有依賴，方法之間彼此不會干擾。

Transition

Transition翻譯為“過渡”，強調的是過程。在css中指在一段時間內，元素從一個狀態（對應一個css屬性）過渡到另一個狀態的動態過程。我們可以決定以何種方式過渡過渡和花費多少時間。

例如，我們把鼠標懸浮到云上面的時候使其變大一些可以這么寫：

.cloud{    width: 240px;    transition: 1s;}.cloud:hover{    width: 320px;}

效果：

transition可以和transform結合使用，比如我們可以讓云變大的同時轉一圈：

.cloud:hover{    width: 320px;    transform: rotate(360deg);}

效果：

我們可以給不同的效果設置不同的過渡時間：

.cloud{    width: 240px;    transition: width 1s, transform 0.5s;}

我們也可以給效果設置延時時間，比如我們等寬度增大之后再旋轉：

.cloud{    width: 240px;    transition: width 1s, transform 0.5s 1s;}

效果：

我們還可以給每個效果設置不同的timing function，用于控制加速效果。

比如我們可以讓旋轉的速度逐漸加快：

.cloud{    width: 240px;    transition: transform 2s ease-in;}.cloud:hover{    transform: rotate(1080deg);}

效果：

更多的timing function請后面會進一步討論，也可以參考 MDN transition-timing-functions

Keyframes

(1) 基本用法

Keyframe中文譯為“關鍵幀”，是animation中很強大的功能，通俗說就是我們可以通過定義一段動畫中的關鍵點、關鍵狀態來創建動畫。Keyframes相比transition對動畫過程和細節有更強的控制。

我們先看一個例子（部分代碼省略）

html:

<div class="sky"></div><div class="grass"></div><div class="road">  <div class="lines"></div>  <img src="http://lc-jOYHMCEn.cn-n1.lcfile.com/a3f630c957a4b32d0221.png" class="mario animated"></div>

css：

.mario{  position: absolute;  left: 0px;  width: 100px;}.animated{  animation-name: drive;  animation-duration: 1s;  animation-timing-function: linear;}@keyframes drive {  from{ transform: translateX(0) }  to{ transform: translateX(700px) }}

效果：

其中 drive 是該keyframes的名稱，from, to 是keyframes播放過程的時間起點和終點，時間點也可以用百分比表示，如50%，from， to 等價于 0%, 100%。每個時間點對應一個css狀態，代表一個關鍵幀（keyframe）。keyframes定義完成后使用方法如下：

animation也有簡寫形式，如：

animation: slidein 3s ease-in 1s infinite reverse both running;

但這種對書寫順序有一定要求（delay要寫在duration后面，其他參數無順序要求，css會通過傳入的關鍵詞識別）。

(2) Animation Delay

通過animation-delay，我們可以給動畫延遲執行：

animation-delay: 2s;

(3) Animation Fill Modeforwards

在上面的例子中可以看到馬里奧運動到右邊之后又回到了起點，如果我們想讓他運動完成后就停留在右邊呢？很簡單，我們設置annimation fill mode就可以了：

animation-fill-mode: forwards

forwards 表示動畫完成后，元素將保持最后一幀的狀態。

backwards

與之相對的還有 backwards，backwards表示并不是動畫完成后元素變回第一幀的狀態，而是表示當設置了animation-delay時，在動畫開始前的等待過程中，立刻給元素應用第一幀的狀態。我們將上面的例子稍作修改看一下效果：

.animated{  animation-name: drive;  animation-duration: 1s;  animation-fill-mode: backwords;  animation-delay: 1s;  animation-timing-function: linear;}@keyframes drive {  from{ transform: translateX(350px) }  to{ transform: translateX(700px) scale(2) }}

效果：

可以看到，動畫開始之前小人立馬移動到350px處，1s之后才開始動畫。

both

顯而易見，both會同時應用forwards和backwards兩種規則，即在delay時先應用第一幀的狀態，結束時保持最后一幀的狀態。

(3) Animation Repeat

我們可以通過 animation-iteration-count 設置動畫循環播放的次數，比如：

animation-iteration-count: 3;// 無限循環animation-iteration-count：infinite;

就像這樣：

(4) Animation Direction

normal

正常方向，也是默認方向，即先from，再to。

reverse

與正常方向相反，即先to，再from。例如：

.animated{  ...    animation-direction: reverse;}@keyframes drive {  from{ transform: translateX(-100px) rotateY(180deg) }  to{ transform: translateX(862px) rotateY(180deg)}}

效果：

alternate

alternate意為“交替”，即normal和reverse交替之行，先normal再reverse。

reverse alternate

反向交替，先reverse再normal。

(4) Animation Timing function

和transition一樣，keyframes也可以設置timing function，常用的timing function歸納如下：

ease：默認方法，初速度較慢，然后加速再減速
ease-in：初速度最慢，然后一直加速
ease-out：初速度最快，然后一直減速
ease-in-out：初速度較慢，然后加速再減速，與ease的區別在于加速減速過程是對稱的
linear：恒速運動

直觀表現如下（codepen）：

除了上面現成的方法，我們可以通過貝塞爾曲線自定義速度曲線。我們可以在 http://cubic-bezier.com 可視化的創建我們自己的貝塞爾曲線。比如創建一個剛開始極慢，突然變得極快的曲線：

css:

animation-timing-function: cubic-bezier(1,.03,1,-0.03);

效果：

是不是挺神奇！

(5) Chain Animation

我們可以將多個animation串聯使用，比如我們想讓小人在行駛的過程中跳躍，可以這么寫：

css:

.mario {  ...    animation: drive 3s both infinite linear, jump 0.5s 1.2s ease-in-out infinite;}@keyframes jump {  0% { top: -40px; }  50% { top: -120px; }  100% { top: -40px; }}

效果：