打破JS特權——CSS動畫

打破JS特權——CSS動畫

來自專欄 IT修真院10 人贊了文章

上周六的線上直播課程中，由修真院的技術總監沁修帶領直播課學員們

以直播、問答、互動的形式，深入理解了【CSS動畫】，講解如何用少量css代碼實現豐富多彩的頁面效果。

錯過直播課的同學，現將文字版課程內容分享給大家，希望大家能夠從中有所收穫。

CSS動畫

1、transform

2、transition

3、animate

概述

在過去，如果想要頁面上的東西動起來，只能使用js加上各種計算。

感謝時代的進步，css也在這些年有了長足的發展，現在已經可以使用css來做一些簡單的動畫效果。

css動畫的製作其實並沒有什麼特別高深的地方，引入少量的css代碼就能實現豐富多彩的頁面效果。

但依然需要深入理解css的基礎才能靈活運用，做出畫面美觀、代碼簡潔、性能高效的css動畫。

1.transform 變形

https://www.zhihu.com/video/1002575445476388864 https://www.zhihu.com/video/1002575516712280064

有的人可能會對transform和transition迷糊，先來解析他們的英文：

首先看看詞根trans，通常表示穿過，穿越的意思，而form則表示形狀。

當他們連到一起就是穿越了這個形狀，也就是變形的意思。

如果對變形金剛感興趣的話那對這個單詞應該很熟悉transformer。

而ion後綴則是一個名詞後綴，意思也就是穿過穿越的名詞形式，翻譯過來就是過渡轉變。

這樣首先搞清楚這兩個單詞的區別，才好學習他們的用途。

transform是用於改變塊級元素的形狀，它有四種變形方式：

移動，縮放，旋轉，以及傾斜。

1.1 移動 translate

其語法是這樣的，聲明需要變形，變形方式為移動：

.element {

transform: translate(n, m);

}

translate函數能輸入兩個值，分別表示在橫坐標和縱坐標上的位移

同時還能使用translateX(n)和translateY(m)來單獨設置位移情況。

元素則會在原來的位置上產生位移並且不會影響文檔流

位移的坐標以元素左上角為基點，橫坐標向右為正向左為負，縱坐標向下為正向上為負。

1.2 scale 縮放

縮放和移動函數類似，也是可以接受兩個值，分別表示橫向縮放和縱向縮放：

.element {

transform: scale(n, m);

}

如果只寫了一個值則表示橫向和縱向上同時縮放：

.element {

transform: scale(n);

}

值得注意的是

scale除了對元素本身的寬高有影響外，對元素的字體大小，padding這些屬性也同樣有影響。

並且這個函數可以拆分為scaleX(n)和scaleY(m)來使用。

1.3 rotate 轉動

轉動的語法是這樣的：

.element {

transform: rotate(20deg);

}

deg是degrees角度弧度的縮寫，說明這是一個角度單位。

默認會以元素的中心為旋轉中心，在Z軸上沿順時針旋轉。

如果有需要也可以分別設置按XYZ軸來旋轉，分別使用如下三個函數

rotateX(), rotateY(), rotateZ()

1.3 skew 傾斜

傾斜的語法是這樣的：

.element {

transform: skew(20deg, 45deg);

}

skew函數能接受兩個值，表示先沿著x軸傾斜，然後再沿著y軸傾斜的角度。

在沿著x軸傾斜的時候，會保持高度的不變；

而在沿著Y軸傾斜的時候，會保持著寬度的不變。

當然也可以將這個函數拆分成兩個函數分別表示

skewX(20deg),skewY(20deg)

2.transition 過渡動畫

https://www.zhihu.com/video/1002575612082597888 https://www.zhihu.com/video/1002575716352864256

前面所說到的變形並不是動畫，但是動畫的基礎之一

而現在說到的transition卻是踏踏實實的動畫，它是提供了一種在更改css屬性時控制動畫速度的。

可以讓屬性變化層位一個持續一段時間的過程，而不是立即生效。

比如將一個元素的背景色從白色改為紅色，通過這個改變是立即生效的。

但使用transition後元素的顏色將逐漸從白色變化為紅色，按照一定的曲線速率變化，實現過渡動畫的效果。

它還可以控制哪些屬性發生動畫效果，以及何時開始，持續多久以及如何動畫等等細節。

比如下方代碼，在沒有加上transition: 2s;之前，將滑鼠放到box上方時可以看到盒子的變化是瞬間發生的。

但加上之後可以看到盒子被hover的時候，的寬高和顏色被自動補全了一段長達2秒的過渡動畫：

.box {

width: 100px;

height: 100px;

background: pink;

transition: 2s;

}

.box:hover {

width: 80px;

height: 120px;

background: lightgreen;

}

transition其實是由四個屬性組合而成的一個綜合寫法：

屬性名說明

transition-property

用於指定哪個css屬性用於過渡，只有指定的屬性才會發生過渡動畫，默認值all

alltransition-duration

指定過渡的時長。也可以為不同屬性分別指定不同時長，默認值0s

transition-timing-function

指定函數變化的曲度速率，有ease,linear,step-end,steps(4,end)幾種，默認值ease

easetransition-delay

指定延遲執行的時長，默認值0s

它們的簡寫語法是這樣的，並且要注意書寫順序

比如當有2個數字時長時，會將第一個默認為過渡時長，第二個為延遲時長：

transition: <transition-property><transition-duration><transition-timing-function><transition-delay>

如果不想一次設置所有all屬性的動畫可以分別設置：

.box {

width: 100px;

height: 100px;

background: pink;

transition: width 2s ease 0s, height 1s ease 0s, background 2s ease 2s;

}

.box:hover {

width: 80px;

height: 120px;

background: lightgreen;

}

3.animation 關鍵幀動畫

https://www.zhihu.com/video/1002575775710797824 https://www.zhihu.com/video/1002575823978602496 https://www.zhihu.com/video/1002575854609760256

不同於transition過渡動畫只能定義首尾兩個狀態

關鍵幀動畫可以定義多個狀態，定義任意多的關鍵幀。

而過渡動畫就是只能定義第一幀和最後一幀這兩個關鍵幀的動畫。

因此關鍵幀動畫可以實現更複雜的動畫效果。

語法是這樣的：

@keynames 動畫名稱{

時間點（元素狀態）

時間點（元素狀態）

}

然後把定義好的動畫綁定到元素上就能實現關鍵幀動畫了

而不像過渡動畫需要一個狀態的改變才能觸發，比如：

.element {

animation: pulse 5s infinite;

}

@keyframes pulse {

0% {

background-color: #001F3F;

}

100% {

background-color: #FF4136;

}

}

animation的具體屬性比較多：

屬性名說明

animation-name

@keyframes動畫的名稱

animation-duration

動畫一個周期所花費的時間，默認為0

animation-timing-function

動畫的速度曲線，默認為ease。

animation-delay

延遲執行

animation-direction

動畫是否在下一個周期逆向播放；normal為正常播放，alternate為輪流反向播放

animation-iteration-count

動畫被播放的次數

animation-fill-mode

動畫時間之外的狀態，

animation-play-state

動畫是否正在運行或暫停，默認是running

同樣的，animation也可以簡寫，像前面所說到的transition一樣，可以把這些屬性簡寫到一起。

使用默認值的部分可以省略掉，不過需要注意的是animation-play-state是不能簡寫到animation中。

以上就是上節課的內容解析啦

想進一步深入的同學歡迎加入我們的IT交流群557222766共同討論學習~

下節預告

CSS代碼繁雜耗時？

來用Sass，世界上最成熟、最穩定、最強大的專業級css擴展語言，無縫兼容任何可用的css庫！

7月7號上午10點，也就是本周六

用一節課帶你走進預編譯語言Sass，提高Coding效率，從繁冗的重複性勞動中解放出來

報名聽課的同學們將獲得

1、與技術總監級別的一線開發人員接觸、提問機會

2、來自真實項目的應用開發技巧、代碼規範

3、與直播課程配套的任務體系、日報體系

4、分配一對一的專屬師兄，進行技術輔導

5、課程PPT、錄播視頻、細化知識點解析課堂等學習資源

周六上午開課，不佔用工作、學習時間

一餐飯的價格，汲取實戰角度的開發經驗

快來掃碼報名吧！

條件所限無法報名的同學，我們下周依然會將直播課的文字版更新在機構號，歡迎前來討論學習~

職業選擇、求職輔導、學習規劃、困難答疑、技術交流等等，都可以加入IT交流群557222766

或者加大師姐微信諮詢也可以喲

微信號：it_xzy

技能樹.IT修真院 http://www.jnshu.com

「我們相信人人都可以成為一個工程師，現在開始，找個師兄，帶你入門，學習的路上不再迷茫。這裡是技能樹.IT修真院，初學者轉行到互聯網行業的聚集地。"

推薦閱讀：