我們看到設(shè)計(jì)精美的科技巨頭網(wǎng)站（如Apple或微軟）或特斯拉或梅賽德斯等汽車公司時(shí)，我們每個(gè)人都會(huì)感到震驚。

使這些網(wǎng)站脫穎而出的因素，往往是吸引人的動(dòng)畫和效果，讓我們一次又一次地看。

那么，他們?nèi)绾问咕W(wǎng)站如此驚人地互動(dòng)？

有沒有想過這些網(wǎng)站上的動(dòng)畫實(shí)際上是如何運(yùn)作的？

您是否希望為您的企業(yè)設(shè)計(jì)一個(gè)同樣優(yōu)雅和互動(dòng)的網(wǎng)站？

如果是的話，那就別再看了。

請(qǐng)繼續(xù)閱讀，因?yàn)檫@是一個(gè)廣泛的摘錄，涵蓋了CSS動(dòng)畫和變換的基礎(chǔ)知識(shí)，可以極大地幫助您實(shí)現(xiàn)商業(yè)網(wǎng)站的相同功能。

如果您剛剛進(jìn)入前端開發(fā)領(lǐng)域，或者希望擴(kuò)展您對(duì)前端開發(fā)的理解，那么請(qǐng)繼續(xù)閱讀此博客，因?yàn)樵谧詈?，您將全面了解CSS。

CSS或?qū)盈B樣式表是您會(huì)注意到的Web應(yīng)用程序的相當(dāng)一部分。

雖然CSS為Web應(yīng)用程序設(shè)置了樣式，但HTML或超文本標(biāo)記語言構(gòu)成了它。

動(dòng)畫在改善用戶體驗(yàn)方面發(fā)揮著關(guān)鍵作用，因?yàn)樗鼈冇兄谔峁└倪M(jìn)的視覺反饋，并有助于與網(wǎng)站進(jìn)行交互。

CSS 3具有豐富的內(nèi)置屬性，大大有助于動(dòng)畫元素，并且在所有主流瀏覽器中也是如此。

但是 - 強(qiáng)大的力量，更大的責(zé)任。

動(dòng)畫需要明智地使用，否則你最終可能會(huì)創(chuàng)建一個(gè)比交互式更令人分心的頁面。動(dòng)畫的整個(gè)目的是作為一種輔助，而不是在使用Web應(yīng)用程序時(shí)的障礙。

根據(jù)谷歌的一份報(bào)告，幾乎50％的網(wǎng)絡(luò)流量來自移動(dòng)設(shè)備。因此，任何企業(yè)都需要?jiǎng)?chuàng)建適合移動(dòng)設(shè)備的動(dòng)畫。

對(duì)CSS（最好是CSS 3），HTML和某些jQuery 有基本的了解也很有必要。jQuery是一個(gè)Javascript庫，可以幫助開發(fā)人員使用網(wǎng)站的元素。這方面的技術(shù)術(shù)語是 - DOM操作。

由于您的目標(biāo)受眾可能會(huì)有所不同，因此您可能使用多種網(wǎng)絡(luò)瀏覽器（Mozilla Firefox，Google Chrome，Safari，Opera，Internet Explorer），因此需要滿足所有這些需求。

CSS動(dòng)畫有三個(gè)重要方面：

• Transforms(變換)
• Transitions(轉(zhuǎn)變)
• Keyframes(關(guān)鍵幀)

描述CSS中動(dòng)畫和變換的關(guān)鍵元素的流程圖。

A部分：Transforms

變換有助于以各種奇妙的方式改變您的網(wǎng)頁元素 - 從移動(dòng)元素到重新調(diào)整大小，從旋轉(zhuǎn)元素到傾斜它。

最好的部分 - 您可以在不改變文檔流程的情況下更改任何內(nèi)容。

變換有四個(gè)重要方面：

1. Translate
2. Translate
3. Rotate
4. Skew

讓我們深入挖掘一下，好嗎？

1.Translate

基于Translate將對(duì)象從一個(gè)點(diǎn)移動(dòng)到另一個(gè)點(diǎn)基本上。

資料來源：0fps.net

Translate會(huì)更改元素的坐標(biāo)。它用于更改2D平面上組件的外觀。

Translate意味著在網(wǎng)頁上簡(jiǎn)單地將元素從一個(gè)位置移動(dòng)到另一個(gè)位置。您可以在X軸，Y軸或兩者上平移對(duì)象。

Moves the element on the X-axis
Syntax: transform: translateX(200px); or transform: translateX(-200px);
Moves the element on the Y-axis
Syntax: transform: translateY(200px); or transform: translateY(-200px);
Using shorthand
Syntax: transform: translate(x-axis, y-axis)
Example: transform: translate(200px, 200px);
Alert!
transform: translate(200px); [will only translate the element along the X-axis]

2.Scale

資料來源：camo.envatousercontent.com

人們可以使用圖像的大小以及軸X和Y.縮放會(huì)扭曲元素的形狀并降低元素的質(zhì)量。大于1的數(shù)字將增加大小，小于1的小數(shù)將減小大小。

Scaling along the X-axis - transform: scaleX(3);
Scaling along the Y-axis - transform: scaleY(0.5);
Using the shorthand - for scaling along X and Y axis together -
transform: scale(3 , 0.5); or transform: scale(0.5);

3.Rotate

您可以順時(shí)針或逆時(shí)針旋轉(zhuǎn)元素。使用的測(cè)量單位是度。正值將順時(shí)針旋轉(zhuǎn)元素，反之亦然。這種旋轉(zhuǎn)也會(huì)沿X，Y和Z軸發(fā)生。

資料來源：gamedev.stackexchange.com

理解CSS動(dòng)畫中的旋轉(zhuǎn)是最棘手的部分之一，因此很多人無法利用此功能的真正潛力。

沿著X軸

想象一下，棉花糖在篝火上旋轉(zhuǎn)時(shí)被烤。您必須將元素可視化以與X軸一起轉(zhuǎn)換為頁面，這就是X軸上的旋轉(zhuǎn)效果。我們不會(huì)看到3D旋轉(zhuǎn)，我們能夠看到的是元素高度的變化。

Syntax: transform: rotateX(45deg);

沿著Y軸

想象一個(gè)桿子上的舞者。元素將沿Y軸旋轉(zhuǎn)到頁面中。你會(huì)注意到的是組件的寬度變化了。

Syntax: transform: rotateY(45deg);

沿Z軸

這是使用旋轉(zhuǎn)時(shí)可以使用的最佳方向，因?yàn)槟梢钥吹綄?shí)際旋轉(zhuǎn)的元素。也可以分別用正和負(fù)旋轉(zhuǎn)值修改順時(shí)針和逆時(shí)針運(yùn)動(dòng)。為此，嘗試想象箭頭進(jìn)入頁面并且元素相對(duì)于該箭頭旋轉(zhuǎn)。

transform: rotateZ(45deg) – clockwise rotation
transform: rotateZ(-45deg) – counterclockwise rotation

Skew

4.gif

Skew元件意味著傾斜。它具有正值和負(fù)值，并且像旋轉(zhuǎn)一樣，它也以度來度量。

正X值將元素向左彎曲，反之亦然，對(duì)于負(fù)X.同樣，正Y值向下傾斜元素，反之亦然。默認(rèn)情況下，如果變換中未指定X或Y，則它將相對(duì)于X軸移動(dòng)元素。

Along X-axis
transform: skewX(45deg) or skew(45deg);
Along Y-axis
transform: skewY(80deg);

5.組合變換

也可以將多個(gè)轉(zhuǎn)換應(yīng)用于單個(gè)轉(zhuǎn)換語句中。順序確實(shí)很重要（有時(shí)），因?yàn)榈诙€(gè)變換將應(yīng)用于第一個(gè)變換，第三個(gè)變換將應(yīng)用于前兩個(gè)變換的結(jié)果。

資料來源：commons.wikimedia.org

transform: translateX(200px) rotateX(45deg) scaleY(1.5) skewX(45deg);

所有這些變換都將對(duì)某些用戶事件生效，例如懸停，點(diǎn)擊，焦點(diǎn)，活動(dòng)等。要查看動(dòng)作中的魔法，您可以在這些事件中添加變換。

.element-to-animate{
display: block
}
.element-to-animate:hover{
transform: translateX(200px) rotateX(45deg) scaleY(1.5) skewX(45deg);
}

B部分：TRANSITIONS

資料來源：mozillademos.org

如果您有機(jī)會(huì)查看上面的代碼，您可能會(huì)注意到在狀態(tài)更改期間懸停時(shí)的混蛋; 這恰恰是Transitions的目的。Transitions有助于使動(dòng)畫流暢。

可以借助以下屬性控制轉(zhuǎn)換：

• transition-property
• transition-duration
• transition-timing-function
• transition-delay

transition-property

這些是可以使用轉(zhuǎn)換的CSS屬性。其范圍從使用邊距和填充到背景和邊框。您可以將轉(zhuǎn)換應(yīng)用于特定功能或完整列表。可在此處找到此權(quán)限范圍內(nèi)所有屬性的完整列表。

將transition屬性應(yīng)用于特定的CSS屬性

transition-property: background-color;

將轉(zhuǎn)換應(yīng)用于整個(gè)CSS屬性列表

transition-property: all;

transition-duration

動(dòng)畫將在其中播放的持續(xù)時(shí)間。這可以很容易地以秒（s）或毫秒（ms）來測(cè)量。建議使用秒，因?yàn)樗顾鼈円子陂喿x - 即使你辦公室的同事也不會(huì)被你惹惱！

transition-duration: 0.5s;

transition-timing-function

速度可以通過動(dòng)畫來改變用戶體驗(yàn); 因此建議控制它。您可以通過使用transition-timing-function來實(shí)現(xiàn)它。

CSS 3團(tuán)隊(duì)非常友好地為我們提供了一些內(nèi)置的速度值，如ease, ease-in, ease-in-out

如果你希望掌握速度的全部命令 - 使用Bezier曲線。

transition-timing-function: ease;
transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);

transition-delay

這有助于在啟動(dòng)動(dòng)畫的觸發(fā)事件和動(dòng)畫的實(shí)際開始之間創(chuàng)建暫停。簡(jiǎn)單地說，轉(zhuǎn)換延遲 - 延遲動(dòng)畫。它以秒（s）或毫秒（ms）為單位進(jìn)行測(cè)量。

transition-delay: 0.5s;

速記：

transition: (property) (duration) (transition-timing-function) (transition-delay);

兩個(gè)面向時(shí)間的功能的順序，即持續(xù)時(shí)間和轉(zhuǎn)換延遲問題 ！

Transforms和Transitions一起使用

7.gif

狀態(tài)1：NORMAL

.element-to-animate display: block; transition: transform 1s ease 0.2s, background 1s; }

狀態(tài)2：HOVER

.element-to-animate:hover{ background: black; transform: translateX(200px); }

對(duì)于在狀態(tài)1和狀態(tài)2之間轉(zhuǎn)換，可以將轉(zhuǎn)換分別應(yīng)用于所有屬性和單個(gè)時(shí)序，或者如果要在狀態(tài)2中的所有屬性上應(yīng)用轉(zhuǎn)換，則：

transition: all 1s ease 0.2s;

C部分：KEYFRAMES

資料來源：css-tricks.com

關(guān)鍵幀有助于在特定時(shí)間將動(dòng)畫從一個(gè)更改為另一個(gè)。

可以通過兩種方式使用關(guān)鍵幀：

1. 從…到…
2. 百分比方法

1.從…到…

在這種方法中，動(dòng)畫期間只有2個(gè)狀態(tài) - 開始狀態(tài)和結(jié)束狀態(tài)。

句法：

@keyframes animation_name {
 from { }
 to { }
}

使元素（例如，Car）動(dòng)畫化以從其初始位置水平移動(dòng)：

@keyframes drive{
from {
transform: translateX(-200);
}
to {
transform: translateX(1000px);
 }
}
.car{
animation-name: drive;
animation-duration: 3s;
animation-fill-mode: forwards;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-timing-function: ease-in;
animation-direction: normal;
}

2.百分比方法

我們不能在@keyframes中使用from-to，因?yàn)楝F(xiàn)在有超過1個(gè)狀態(tài)。百分比方法將動(dòng)畫分解為各種中間狀態(tài)，包括開始和結(jié)束狀態(tài)。起始狀態(tài)用0％表示，結(jié)束狀態(tài)用100％表示。可以有多少中間狀態(tài)，但建議在整個(gè)過程中保持狀態(tài)的隔離。

示例：0% — 25% — 50% — 75% — 100%

@keyframes jump{
0% { transform: translateY(-50px) }
50% { transform: translateY(-100px) }
100% { transform: translateY(-50px) }
}

?動(dòng)畫速記

也可以使用這種簡(jiǎn)潔的格式來編寫動(dòng)畫：

animation: (animation-name) (animation-duration) (animation-fill-mode) (animation-timing-function) (animation-iteration-count) (animation-direction) (animation-delay);

注意：動(dòng)畫延遲將始終在動(dòng)畫持續(xù)時(shí)間之后出現(xiàn)。除了它們 - 時(shí)間導(dǎo)向的功能和其他屬性的順序無關(guān)緊要。

例：

.car{
animation-name: drive;
animation-duration: 3s;
animation-fill-mode: forwards;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-timing-function: ease-in;
animation-direction: normal;
}
Can be re-written as:
.car{
animation: drive 3s ease-in infinite normal 2s;
}

我們希望在“car”元素上添加兩個(gè)動(dòng)畫 - 驅(qū)動(dòng)和跳轉(zhuǎn)。我們可以通過使用“鏈接動(dòng)畫”和單行代碼完成此操作。

?什么是鏈接動(dòng)畫？

使用CSS輕松播放多個(gè)動(dòng)畫。逗號(hào)分離技術(shù)可用于鏈接動(dòng)畫并運(yùn)行一個(gè)動(dòng)畫。例如，

···

.car{

animation: drive 3s ease-in infinite normal 2s, jump 2s ease 4 alternate reverse;

}

···

動(dòng)畫屬性分類：

• 使用哪種動(dòng)畫？
• animation-name：動(dòng)畫的，由名稱@keyframes之后的關(guān)鍵字指示
• 動(dòng)畫結(jié)束時(shí)該怎么辦？
• animation-fill-mode：告訴如何處理動(dòng)畫窗口外部動(dòng)畫的元素。
• 如果您希望重復(fù)動(dòng)畫“n”次，請(qǐng)使用，
• animation-iteration-count：重復(fù)動(dòng)畫。它可以具有數(shù)字值，或者如果您希望動(dòng)畫連續(xù)播放，則使用“無限”。
• 如果您想要反轉(zhuǎn)動(dòng)畫的方向
• animation-direction：您不需要一起編寫單獨(dú)的動(dòng)畫來反轉(zhuǎn)動(dòng)畫。你可以應(yīng)用它來播放當(dāng)前動(dòng)畫，它的方向。

In From – To Approach:
reverse: to - from
alternate: from-to -> to-from -> from-to
alternate-reverse: to-from -> from-to -> to-from
In Percentage Approach
reverse: 100% - 0%
alternate: 0% - 100% -> 100% - 0% -> 0% - 100%
alternate-reverse: 100% - 0% ->0% - 100% ->100% - 0%

• 動(dòng)畫定時(shí)功能，控制動(dòng)畫開始，行為和結(jié)束的速度。有一些內(nèi)置值，如ease，ease-in，你可以使用cubic-bezier（n，n，n，n）編寫自己的值。在這玩吧。
• 延遲CSS動(dòng)畫也可以 使用動(dòng)畫延遲將在事件被觸發(fā)后幾秒/毫秒啟動(dòng)動(dòng)畫。

結(jié)論

一開始習(xí)慣CSS可能有點(diǎn)復(fù)雜。但是一旦你習(xí)慣了，你就會(huì)發(fā)現(xiàn)CSS動(dòng)畫和變換非常奇妙。

謝謝閱讀。我們希望這篇文章能幫到你。如果確實(shí)如此，請(qǐng)大家豎起大拇指，如果您有任何疑問，請(qǐng)隨時(shí)放棄您的意見。此外，如果您想要分享您想要分享的CSS變換或動(dòng)畫的令人興奮的用途，我們很樂意聽取您的意見。

翻譯自：https://medium.com/engineerbabu/a-detailed-guide-to-css-animations-and-transitions-b544502c089c

擊右上方紅色按鈕關(guān)注“web秀”，讓你真正秀起來

前言

說起CSS3動(dòng)畫，就必須說說 transform，translate，transition，animation這4個(gè)屬性，transform主要定義元素的動(dòng)作，比如旋轉(zhuǎn)、傾斜、位移等，translate是transform里面的屬性，用于2D/3D位移。后2個(gè)主要對(duì)動(dòng)作進(jìn)行描述，動(dòng)畫時(shí)間、速度曲線、次數(shù)等。

下面我用是一些簡(jiǎn)單的示例，讓大家快速的入門上手:

快速開始第一個(gè)動(dòng)畫

<style>
.div1{
 width: 100px;
 background: red;
 /** 動(dòng)畫描述：寬度改變動(dòng)畫 用時(shí) 1s*/
 transition: width 1s;
}
.div1:hover{
 width: 200px;
 background: blue;
}
</style>

<div class="div1">動(dòng)畫</div>

這里hover事件時(shí)改變寬度和背景顏色，用transition來描述動(dòng)畫，由于我們只對(duì)width進(jìn)行了描述，所以背景色，鼠標(biāo)指上去，會(huì)立馬變色，并不會(huì)有漸變的過程。

這里為什么用transition而不用animation？那就要說說他們直接的區(qū)別了。

transition需要觸發(fā)一個(gè)事件， 而animation在不需要觸發(fā)任何事件的情況下也可以顯式的隨著時(shí)間變化來改變?cè)豤ss的屬性值，從而達(dá)到一種動(dòng)畫的效果。transition屬性是一個(gè)簡(jiǎn)單的動(dòng)畫屬性，非常簡(jiǎn)單非常容易用。可以說它是animation的簡(jiǎn)化版本，是給普通做簡(jiǎn)單網(wǎng)頁特效用的。

現(xiàn)在明白了吧，因?yàn)槲覀冇玫膆over事件，所以要用transition。

下面請(qǐng)看第二個(gè)例子

快速開始第二個(gè)動(dòng)畫

<style>
.div1{
 width: 100px;
 background: red;
 /** 動(dòng)畫描述：寬度顏色改變動(dòng)畫 用時(shí) 1s infinite（無限次）*/
 animation: second 1s infinite;
 color: #fff;
}
@keyframes second{
 /**開始（可以用百分比表示）*/
 from {
 width: 100px;
 background: red;
 }
 /**結(jié)束（可以用百分比表示）*/
 to {
 width: 200px;
 background: blue;
 }
 /** or */
 /**開始*/
 0% {
 width: 100px;
 background: red;
 }
 /**中間可以加多個(gè)區(qū)間*/
 /**結(jié)束*/
 100% {
 width: 200px;
 background: blue;
 }
}
</style>

<div class="div1">動(dòng)畫</div>

這里動(dòng)畫從加載就開始執(zhí)行，所以用了animation，改變寬度和背景色，用時(shí)1s，并且無限次循環(huán)執(zhí)行。@keyframes規(guī)則是創(chuàng)建動(dòng)畫。 -webkit-（chrome/safari）, -ms-(ie) 或 -moz-(firefox) 用于兼容不同瀏覽器。

快速開始第三個(gè)動(dòng)畫

<style>
.div1{
 width: 100px;
 background: red;
 animation: second 1s infinite;
 color: #fff;
}
@keyframes second{
 100% {
 transform: rotate(20deg);
 }
}
</style>

<div class="div1">動(dòng)畫</div>

transform：rotate使其div元素2D旋轉(zhuǎn)20°.當(dāng)然你可以設(shè)置transform：rotateY, Y 軸的 3D 旋轉(zhuǎn)。

你還可以設(shè)置transform: translate，進(jìn)行2D，3D位移；

transform: scale，進(jìn)行2D，3D縮放；

transform: skew，進(jìn)行2D傾斜等等。

總結(jié)

好的動(dòng)畫效果，第一要素是：好的想法，有創(chuàng)意，才有好的成品；第二要素是：有好的實(shí)現(xiàn)解題思路，當(dāng)有設(shè)計(jì)后，制作就需要想辦法實(shí)現(xiàn)效果，剝繭抽絲，一步一步來；第三要素：不畏懼的心，勇敢嘗試，多實(shí)踐，多動(dòng)手，靈感往往來與你寫的過程中。

有了上面的小示例，相信小伙伴們也能自己寫寫簡(jiǎn)單的CSS3動(dòng)畫了，如果有疑問，可以評(píng)論留言，大家一起學(xué)習(xí)探討。