Animation怎么在CSS3 中使用

本篇文章為大家展示了Animation怎么在CSS3 中使用，內(nèi)容簡(jiǎn)明扼要并且容易理解，絕對(duì)能使你眼前一亮，通過(guò)這篇文章的詳細(xì)介紹希望你能有所收獲。

兼容性

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

CSS 坐標(biāo)系

在了解animtion之前，我們有必要先了解css的坐標(biāo)系，因?yàn)楹芏嗟腶nimation效果都和元素的坐標(biāo)密切相關(guān)。在css3中網(wǎng)頁(yè)不再是一個(gè)二維平面，而是一個(gè)三維空間，水平方向、豎直方向和垂直屏幕方向分別對(duì)應(yīng)三維坐標(biāo)系的x，y，z軸，如下圖所示。箭頭方向?yàn)檎?，反之為?fù)向（注意y軸方向與常規(guī)笛卡爾坐標(biāo)系相反）。

Animations

1. Transforms

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

(1) Translate

Translate一般譯為“翻譯”，但在css里面一般用作“平移”，因?yàn)閠ranslate用于改變html元素的在3d坐標(biāo)系位置。translate支持在坐標(biāo)系內(nèi)任意方向移動(dòng)（通過(guò)任意組合x(chóng)、y、z方向的向量），單位可以是長(zhǎng)度單位和百分比（百分比是相對(duì)于被平移的元素自身尺寸，x軸是相對(duì)于width，y軸是相對(duì)于height，而在z軸方向由于元素是沒(méi)有‘厚度’的，所以對(duì)于z方向不能用百分比表示），例如：

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

注意：

translate是xy平面內(nèi)的2維平移，translate3d是xyz空間內(nèi)的三維平移；

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

(2) Scale

Scale意為“縮放”，顧名思義，是用于改變?cè)氐拇笮?。例如?/p>

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

scale方法接收任意數(shù)字（正負(fù)整數(shù)、小數(shù)、0）作為參數(shù)，該參數(shù)為縮放系數(shù)，系數(shù)>1 效果為放大，0<系數(shù)<1 效果為縮小，系數(shù)=0 元素尺寸變?yōu)闊o(wú)限小而不可見(jiàn)，系數(shù)<0 效果為 >0 時(shí)的鏡像（具體效果可自己實(shí)驗(yàn)）。

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

(3) Rotate

Rotate意為“旋轉(zhuǎn)”，支持將元素以x、y、z為軸旋轉(zhuǎn)，旋轉(zhuǎn)正方向?yàn)槊娉鴺?biāo)軸正向逆時(shí)針?lè)较颍蓞⒖忌厦孀鴺?biāo)系示意圖。rotate方法接收一個(gè)角度作為參數(shù)，角度>0 正向旋轉(zhuǎn)，角度<0 負(fù)向旋轉(zhuǎn)，例如：

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

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

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

與translate和scale類似，rotate也可以作為單獨(dú)的css屬性，但還在實(shí)驗(yàn)階段。

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

(4) 組合

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

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

組合方法的執(zhí)行順序是從右往左，即先執(zhí)行scale，然后rotate，最后translate，產(chǎn)生的效果是逐次累加的。方法書寫的順序?qū)ψ詈笮Ч泻艽蟮挠绊?，看下面例子，沿y軸平移和放大，順序不同，產(chǎn)生的結(jié)果有明顯差別：

如果先translate再scale，平移的距離也將被等比例縮放，而先scale再translate則不會(huì)。所以在使用transform需按照 translate -> rotate -> scale 的順序書寫，讓scale先執(zhí)行，以免放大translate的效果，而rotate先translate執(zhí)行以防止帶著平移的距離一起轉(zhuǎn)動(dòng)。我覺(jué)得這是transform目前不方便的地方，因?yàn)榉椒ㄖg相互干擾并不容易理解，書寫順序也不容易記住。在未來(lái)有望通過(guò)使用獨(dú)立的css transform屬性解決這一問(wèn)題，因?yàn)楠?dú)立的transform屬性對(duì)書寫順序沒(méi)有依賴，方法之間彼此不會(huì)干擾。

Transition

Transition翻譯為“過(guò)渡”，強(qiáng)調(diào)的是過(guò)程。在css中指在一段時(shí)間內(nèi)，元素從一個(gè)狀態(tài)（對(duì)應(yīng)一個(gè)css屬性）過(guò)渡到另一個(gè)狀態(tài)的動(dòng)態(tài)過(guò)程。我們可以決定以何種方式過(guò)渡過(guò)渡和花費(fèi)多少時(shí)間。

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

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

效果：

transition可以和transform結(jié)合使用，比如我們可以讓云變大的同時(shí)轉(zhuǎn)一圈：

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

效果：

我們可以給不同的效果設(shè)置不同的過(guò)渡時(shí)間：

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

我們也可以給效果設(shè)置延時(shí)時(shí)間，比如我們等寬度增大之后再旋轉(zhuǎn)：

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

效果：

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

比如我們可以讓旋轉(zhuǎn)的速度逐漸加快：

.cloud{
    width: 240px;
    transition: transform 2s ease-in;
}

.cloud:hover{
    transform: rotate(1080deg);
}

效果：

更多的timing function請(qǐng)后面會(huì)進(jìn)一步討論，也可以參考 MDN transition-timing-functions

Keyframes

(1) 基本用法

Keyframe中文譯為“關(guān)鍵幀”，是animation中很強(qiáng)大的功能，通俗說(shuō)就是我們可以通過(guò)定義一段動(dòng)畫中的關(guān)鍵點(diǎn)、關(guān)鍵狀態(tài)來(lái)創(chuàng)建動(dòng)畫。Keyframes相比transition對(duì)動(dòng)畫過(guò)程和細(xì)節(jié)有更強(qiáng)的控制。

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

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播放過(guò)程的時(shí)間起點(diǎn)和終點(diǎn)，時(shí)間點(diǎn)也可以用百分比表示，如50%，from， to 等價(jià)于 0%, 100%。每個(gè)時(shí)間點(diǎn)對(duì)應(yīng)一個(gè)css狀態(tài)，代表一個(gè)關(guān)鍵幀（keyframe）。keyframes定義完成后使用方法如下：

animation也有簡(jiǎn)寫形式，如：

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

但這種對(duì)書寫順序有一定要求（delay要寫在duration后面，其他參數(shù)無(wú)順序要求，css會(huì)通過(guò)傳入的關(guān)鍵詞識(shí)別）。

(2) Animation Delay

通過(guò)animation-delay，我們可以給動(dòng)畫延遲執(zhí)行：

animation-delay: 2s;

(3) Animation Fill Modeforwards

在上面的例子中可以看到馬里奧運(yùn)動(dòng)到右邊之后又回到了起點(diǎn)，如果我們想讓他運(yùn)動(dòng)完成后就停留在右邊呢？很簡(jiǎn)單，我們?cè)O(shè)置annimation fill mode就可以了：

animation-fill-mode: forwards

forwards 表示動(dòng)畫完成后，元素將保持最后一幀的狀態(tài)。

backwards

與之相對(duì)的還有 backwards，backwards表示并不是動(dòng)畫完成后元素變回第一幀的狀態(tài)，而是表示當(dāng)設(shè)置了animation-delay時(shí)，在動(dòng)畫開(kāi)始前的等待過(guò)程中，立刻給元素應(yīng)用第一幀的狀態(tài)。我們將上面的例子稍作修改看一下效果：

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

效果：

可以看到，動(dòng)畫開(kāi)始之前小人立馬移動(dòng)到350px處，1s之后才開(kāi)始動(dòng)畫。

both

顯而易見(jiàn)，both會(huì)同時(shí)應(yīng)用forwards和backwards兩種規(guī)則，即在delay時(shí)先應(yīng)用第一幀的狀態(tài)，結(jié)束時(shí)保持最后一幀的狀態(tài)。

(3) Animation Repeat

我們可以通過(guò) animation-iteration-count 設(shè)置動(dòng)畫循環(huán)播放的次數(shù)，比如：

animation-iteration-count: 3;

// 無(wú)限循環(huán)
animation-iteration-count：infinite;

就像這樣：

(4) Animation Direction

normal

正常方向，也是默認(rèn)方向，即先f(wàn)rom，再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也可以設(shè)置timing function，常用的timing function歸納如下：

• ease：默認(rèn)方法，初速度較慢，然后加速再減速

• ease-in：初速度最慢，然后一直加速

• ease-out：初速度最快，然后一直減速

• ease-in-out：初速度較慢，然后加速再減速，與ease的區(qū)別在于加速減速過(guò)程是對(duì)稱的

• linear：恒速運(yùn)動(dòng)

直觀表現(xiàn)如下（codepen）：

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

css:

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

效果：

是不是挺神奇！

(5) Chain Animation

我們可以將多個(gè)animation串聯(lián)使用，比如我們想讓小人在行駛的過(guò)程中跳躍，可以這么寫：

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

效果：

上述內(nèi)容就是Animation怎么在CSS3 中使用，你們學(xué)到知識(shí)或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備，歡迎關(guān)注億速云行業(yè)資訊頻道。