CSS動畫基礎知識
- 2020 年 8 月 12 日
- 筆記
- JavaScript程式設計
CSS動畫就是通過CSS (Cascading Style Sheet,層疊樣式表)程式碼搭建的網頁動畫。它允許設計師和開發人員通過編輯網站的CSS程式碼來添加頁面動畫,從而輕鬆取代傳統動畫圖片或flash動畫的設計方式。
transition(過渡)和animation(動畫)是CSS3中的兩種動畫屬性。
transition強調過渡,是元素的一個或多個屬性發生變化時產生的過渡效果,同一個元素通過兩個不同的途徑獲取樣式,而第二個途徑當某種改變發生(例如hover)時才能獲取樣式,這樣就會產生過渡動畫。
animation強調流程與控制,對元素的一個或多個屬性的變化進行控制,可以有多個關鍵幀(animation 和@ keyframes結合使用)。
1.transition 屬性
transition 屬性是一個簡寫屬性,用於設置四個過渡屬性:
transition-property、transition-duration、transition-timing-function、transition-delay。
(1)transition-duration屬性。
transition-duration 屬性規定完成過渡效果需要花費的時間(以秒或毫秒計)。其格式為:
transition-duration: time;
屬性值time規定完成過渡效果需要花費的時間(以秒或毫秒計)。默認值是 0,意味著不會有效果。
若想得到動畫效果,需要指定transition-duration屬性,否則持續時間為0,transition不會有任何效果。
(2)transition-delay 屬性。
transition-delay 屬性規定過渡效果何時開始。其格式為:
transition-delay: time;
屬性值time規定在過渡效果開始之前需要等待的時間,以秒或毫秒計。
(3)transition-property屬性。
transition-property屬性指定CSS屬性的nametransition效果(transition效果時將會啟動指定的CSS屬性的變化)。其格式為:
transition-property: none |all | property;
其中,屬性值none表示沒有屬性會獲得過渡效果;屬性值all表示所有屬性都將獲得過渡效果;property 定義應用過渡效果的 CSS 屬性名稱列表,列表以逗號分隔。
(4)transition-timing-function 屬性。
transition-timing-function屬性指定切換效果的速度。此屬性允許一個過渡效果,以改變其持續時間的速度。其格式為:
transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);
各屬性值的功能描述如下:
linear 規定以相同速度開始至結束的過渡效果(等於 cubic-bezier(0,0,1,1))。
ease 規定慢速開始,然後變快,然後慢速結束的過渡效果(等於cubic-bezier(0.25,0.1,0.25,1))。
ease-in 規定以慢速開始的過渡效果(等於 cubic-bezier(0.42,0,1,1))。
ease-out 規定以慢速結束的過渡效果(等於 cubic-bezier(0,0,0.58,1))。
ease-in-out 規定以慢速開始和結束的過渡效果(等於 cubic-bezier(0.42,0,0.58,1))。
cubic-bezier(n,n,n,n) 在cubic-bezier 函數中定義自己的值。可能的值是 0 至 1 之間的數值。
例1 transition 屬性的簡單應用。
先看一個簡單的例子,體會transition 屬性的應用。
在頁面中放置一個類名為container的層作為效果展示容器,在該層中再定義一個類名為move-box的層作為應用過渡效果的對象,HTML程式碼描述如下:
<div class=”container”>
<div class=”move-box”>
</div>
</div>
為兩個層定義CSS樣式如下:
.container
{
width: 300px;
height: 200px;
border: 4px solid rgba(255, 0, 0, 0.9);
}
.move-box
{
left:0;
width: 50px;
height: 50px;
position: relative;
background: rgb(0,0,255);
}
這樣,在頁面中會顯示如圖1所示的圖形。
圖1 兩個層在頁面中的顯示
為.containe層添加滑鼠懸停樣式規則,設置move-box層的left屬性值為250px,這樣當滑鼠懸停在圖1所示的紅色矩形框中,藍色正方形會移動到紅色矩形框的最右端。
.container:hover .move-box
{
left:250px;
}
但這個移動是瞬時完成的,沒有任何過渡效果,更談不上動畫了。為此,需要為這個移動的變化設置transition屬性。增加樣式規則如下:
.container .move-box
{
transition-duration: 2s;
}
此時,可以得到如圖2所示的藍色小正方形移動的動畫效果。當滑鼠懸停在紅色矩形框中時,藍色小正方形從左向右移動;當滑鼠移離時,藍色小正方形從右向左移動。
圖2 藍色小正方形移動:雙向過渡效果
完整的HTML程式碼如下。


<!DOCTYPE html> <html> <head> <title>transition 屬性的簡單應用</title> <style> .container { width: 300px; height: 200px; border: 4px solid rgba(255, 0, 0, 0.9); } .move-box { left:0; width: 50px; height: 50px; position: relative; background: rgb(0,0,255); } .container .move-box { transition-duration: 2s; } .container:hover .move-box { left:250px; } </style> </head> <body> <div class="container"> <div class="move-box"> </div> </div> </body> </html>
View Code
在這個例子中,在.container .move-box 中設置了過渡動畫完成的時間為2秒鐘(transition-duration: 2s;),這樣在left屬性變化時會產生過渡動畫效果,而這種效果的產生有兩種途徑:一種是滑鼠在container上懸停, move-box的樣式從默認樣式到.container:hover的樣式,left屬性發生了變化,觸發了過渡效果; 一種是滑鼠移離container層,move-box的樣式從.container:hover的樣式回到默認樣式,left也變化了,因此也產生了過渡效果。這兩個方向上的過渡都是平滑不突兀的。
若將.container .move-box樣式定義中的transition-duration: 2s;移到.container:hover .move-box中,並刪除.container .move-box樣式定義,如下:
.container:hover .move-box
{
left:250px;
transition-duration: 2s;
}
此時,過渡動畫是單一方向上的,當滑鼠在container上懸停時, move-box的樣式從默認樣式到.container:hover的樣式,left屬性發生了變化,觸發了過渡效果; 當滑鼠移離container層,move-box的樣式從.container:hover的樣式回到默認樣式,left也變化了,但此時不是過渡動畫的方式,而是直接回到默認,看上去比較突兀和生硬。效果如圖3所示。
圖3 藍色小正方形移動:單一方向上有過渡效果
例1中的過渡動畫效果是通過改變動畫元素的left屬性,從而使得元素的位置發生改變而得到的。為了對選定元素進行更多的變換,可以應用transform屬性。
transform屬性應用於元素的2D或3D轉換。這個屬性允許將元素旋轉、縮放、移動、傾斜等。其基本使用格式為:
transform: none|transform-functions;
其中,屬性值none表示不進行轉換;屬性值transform-functions表示所採用的轉換函數,可應用的轉換函數和功能描述如下:
matrix(n,n,n,n,n,n) 定義 2D 轉換,使用六個值的矩陣。
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定義 3D 轉換,使用16個值的4×4矩陣。
translate(x,y) 定義 2D 平移轉換。
translate3d(x,y,z) 定義 3D 平移轉換。
translateX(x) 定義X 軸平移轉換
translateY(y) 定義Y 軸平移轉換
translateZ(z) 定義 Z 軸3D 平移轉換
scale(x[,y]) 定義 2D 縮放轉換。
scale3d(x,y,z) 定義 3D 縮放轉換。
scaleX(x) 通過設置 X 軸的值來定義縮放轉換。
scaleY(y) 通過設置 Y 軸的值來定義縮放轉換。
scaleZ(z) 通過設置 Z 軸的值來定義 3D 縮放轉換。
rotate(angle) 定義 2D 旋轉,在參數中規定角度。
rotate3d(x,y,z,angle) 定義 3D 旋轉。
rotateX(angle) 定義沿著 X 軸的 3D 旋轉。
rotateY(angle) 定義沿著 Y 軸的 3D 旋轉。
rotateZ(angle) 定義沿著 Z 軸的 3D 旋轉。
skew(x-angle,y-angle) 定義沿著 X 和 Y 軸的 2D 傾斜轉換。
skewX(angle) 定義沿著 X 軸的 2D 傾斜轉換。
skewY(angle) 定義沿著 Y 軸的 2D 傾斜轉換。
perspective(n) 為 3D 轉換元素定義透視視圖。
例如,transform: translate(50px,100px);表示元素從左邊移動50個像素,並從頂部移動100像素。
將例1中.container:hover .move-box的定義修改為:
.container:hover .move-box
{
transform: translate(250px,0);
}
或
.container:hover .move-box
{
transform: translateX(250px);
}
同樣可以實現如圖2所示的頁面效果。但transform屬性的設置更靈活。
例如,將例1中.container:hover .move-box的定義修改為:
.container:hover .move-box
{
transform: translate(250px,150px);
}
則可得到如圖4所示的動畫效果。此時,藍色小正方形在水平和垂直方向上都發生了平移。
圖4 藍色小正方形沿對角線平移
再如,將例1中.container:hover .move-box的定義修改為:
.container:hover .move-box
{
transform: rotate(45deg) translateX(200px);
}
則可得到如圖5所示的動畫效果。
圖5 藍色小正方形旋轉並平移
例2 圖片的平移、縮放和旋轉變換。
在頁面中放置一個類名為container的層作為效果展示容器,在該層中再定義一個9個子層,每個子層中放置一幅圖片,為圖片添加滑鼠懸停變換效果,當滑鼠懸停在某幅圖片上時,該圖片或平移、或縮放、或旋轉。編寫完整的HTML程式碼如下。


<!DOCTYPE html> <html> <head> <title>圖片的平移、縮放和旋轉變換</title> <style> *{ margin: 0; padding: 0; } .container { border: 3px solid rgba(255, 0, 255, 0.9); width: 1000px; height: 600px; display: flex; margin-left: 200px; flex-direction: row; flex-wrap: wrap; justify-content: space-around; align-content: space-around; } .container>div { width: 300px; height: 150px; transition-duration: 2s; } .container>div>img { width: 100%; height: 100%; } .container>div:nth-child(1):hover { transform: translate(665px,200px); } .container>div:nth-child(2):hover { transform: rotateX(60deg); } .container>div:nth-child(3):hover { transform: rotateY(60deg); } .container>div:nth-child(4):hover { transform: rotateX(360deg); } .container>div:nth-child(5):hover { transform: scale(2); } .container>div:nth-child(6):hover { transform: rotateY(360deg); } .container>div:nth-child(7):hover { transform: rotateZ(360deg); } .container>div:nth-child(8):hover { transform: rotateZ(180deg); } .container>div:nth-child(9):hover { transform: skew(30deg); } </style> </head> <body> <div class="container"> <div><img src="mlh.jpg" alt=""/></div> <div><img src="mls.jpg" alt=""/></div> <div><img src="mltc.png" alt=""/></div> <div><img src="mlyws.png" alt=""/></div> <div><img src="hhl.jpg" alt=""/></div> <div><img src="mlcy.png" alt=""/></div> <div><img src="mlmgy.png" alt=""/></div> <div><img src="mljlg.png" alt=""/></div> <div><img src="mlqlz.png" alt=""/></div> </div> </body> </html>
View Code
在瀏覽器中打開保存上述HTML程式碼的html文件,在瀏覽器中呈現出如圖6所示的變換效果(部分示例)。
圖6 圖片旋轉
transition的優點在於簡單易用,但是它有幾個很大的局限。
(1)transition需要事件觸發,所以沒法在網頁載入時自動發生。例1和例2都是採用偽選擇器hover,在滑鼠懸停時產生動畫效果。
(2)transition是一次性的,不能重複發生,除非一再觸發。
(3)transition只能定義開始狀態和結束狀態,不能定義中間狀態,也就是說只有兩個狀態。例如,例1中的藍色小正方形只能沿一條指定的路線移動。若想讓藍色小正方形沿著上下左右邊界轉圈移動,transition屬性就沒法做到。
CSS Animation就是為了解決這些問題而提出的。
2.animation 屬性
animation 屬性是六個動畫屬性的簡寫屬性,這6個屬性是animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count和animation-direction。
(1)animation-name屬性。
animation-name 屬性為 @keyframes 動畫規定名稱。其格式為:
animation-name: keyframename|none;
其中,屬性值keyframename規定需要綁定到選擇器的keyframe的名稱。屬性值none規定無動畫效果(可用於覆蓋來自級聯的動畫)。
(2)animation-duration屬性。
animation-duration 屬性定義動畫完成一個周期所需要的時間,以秒或毫秒計。其格式為: animation-duration: time;
(3)animation-timing-function屬性。
animation-timing-function屬性規定動畫的速度曲線。速度曲線用於,使變化更為平滑。其格式為:
animation-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);
各屬性值的功能描述如下:
linear 動畫從頭到尾的速度是相同的。
ease 默認。動畫以低速開始,然後加快,在結束前變慢。
ease-in 動畫以低速開始。
ease-out 動畫以低速結束。
ease-in-out 動畫以低速開始和結束。
cubic-bezier(n,n,n,n) 在 cubic-bezier 函數中定義自己的值。可能的值是從 0 到 1 的數值。
(4)animation-delay屬性。
animation-delay 屬性定義動畫什麼時候開始。其格式為:
animation-delay: time;
屬性值time單位可以是秒(s)或毫秒(ms)。並且time允許負值,-2s 使動畫馬上開始,但跳過 2 秒進入動畫。
(5)animation-iteration-count屬性。
animation-iteration-count 屬性定義動畫的播放次數。其格式為:
animation-iteration-count: n|infinite;
其中,屬性值n定義動畫播放次數的數值;屬性值infinite規定動畫應該無限次播放。
(6)animation-direction屬性。
animation-direction屬性規定是否應該輪流反向播放動畫。其格式為:
animation-direction: normal|reverse|alternate|alternate-reverse;
其中,屬性值normal表示以正常的方式播放動畫;reverse 以相反方向播放動畫;alternate 播放動畫時,每奇數時間(1,3,5…)正常播放,每偶數時間(2,4,6…)反方向播放; alternate-reverse播放動畫時,每奇數時間(1,3,5…)反方向播放,每偶數時間(2,4,6…)正常播放。
例3 沿著容器邊框轉圈移動的藍色小正方形。
修改例1中的效果,使得藍色小正方形可以沿著上邊框、右邊框、下邊框和左邊框循環轉圈。編寫HTML文件如下。


<!DOCTYPE html> <html> <head> <title>沿邊框四周移動的小正方形</title> <style> .container { width: 300px; height: 200px; border: 4px solid rgba(255, 0, 0, 0.9); } .move-box { left:0; top:0; width: 50px; height: 50px; position: relative; background: rgb(0,0,255); animation:myfirst 5s infinite; } @keyframes myfirst { 0% { left:0px; top:0px;} 25% { left:250px; top:0px;} 50% { left:250px; top:150px;} 75% { left:0px; top:150px; } 100% { left:0px; top:0px;} } </style> </head> <body> <div class="container"> <div class="move-box"> </div> </div> </body> </html>
View Code
在瀏覽器中打開保存上述HTML程式碼的html文件,在瀏覽器中呈現出如圖7所示的動畫效果。
圖7 沿四周循環轉圈的小正方形
如在上面CSS定義的「animation:myfirst 5s infinite;」語句後,再加上一條語句「animation-direction:alternate;」 ,則得到如圖8所示的動畫效果,與圖7的不同之處在於,偶數運動周期時,小正方形的移動方向沿著「左邊框–>下邊框–>右邊框–>上邊框」。
圖8 沿四周循環轉圈的小正方形
需要說明的是:Internet Explorer 10、Firefox 以及 Opera 等支援 animation 屬性,Safari 和 Chrome 支援替代的 -webkit-animation 屬性,而Internet Explorer 9 以及更早的版本不支援 animation 屬性。因此,從瀏覽器兼容性的角度出發,在例3的HTML文件的CSS定義中可加上如下定義:
@-webkit-keyframes myfirst
{
0% { left:0px; top:0px;}
25% { left:250px; top:0px;}
50% { left:250px; top:150px;}
75% { left:0px; top:150px; }
100% { left:0px; top:0px;}
}
例4 圖片的縮放、旋轉和傾斜動畫。
在頁面中放置一個類名為container的層作為效果展示容器,在該層中再定義一個4個子層,每個子層中放置一幅圖片,為每幅圖片添加動畫效果,第1幅圖片縮小後放大,第2幅圖片繞X軸翻轉,第3幅圖片沿Z軸旋轉,第4幅圖片傾斜。編寫完整的HTML程式碼如下。


<!DOCTYPE html> <html> <head> <title>圖片的縮放、旋轉和傾斜變換</title> <style> *{ margin: 0; padding: 0; } .container { border: 3px solid rgba(255, 0, 255, 0.9); width: 850px; height: 550px; display: flex; margin: 0 auto; flex-direction: row; flex-wrap: wrap; justify-content: space-around; align-content: space-around; } .container>div { width: 400px; height:250px; } .container>div>img { width: 100%; height: 100%; } .container>div:nth-child(1) { animation:myAnim1 3s infinite; } @keyframes myAnim1 { 0% { transform: none;} 50% { transform: scale(0);} 100% { transform: scale(1);} } .container>div:nth-child(2) { animation:myAnim2 3s infinite; } @keyframes myAnim2 { 0% { transform: none;} 100% { transform: rotateX(360deg);} } .container>div:nth-child(3) { animation:myAnim3 3s infinite; } @keyframes myAnim3 { from { transform: none;} to { transform: rotateZ(360deg);} } .container>div:nth-child(4) { animation:myAnim4 3s infinite; } @keyframes myAnim4 { 0% { transform: none;} 33% { transform: skew(15deg,15deg);} 67% { transform: skew(-15deg,-15deg);} 100% { transform: skew(0deg,0deg);} } </style> </head> <body> <div class="container"> <div><img src="mlh.jpg" alt=""/></div> <div><img src="hhl.jpg" alt=""/></div> <div><img src="mlcy.png" alt=""/></div> <div><img src="mltc.png" alt=""/></div> </div> </body> </html>
View Code
在瀏覽器中打開保存上述HTML程式碼的html文件,在瀏覽器中呈現出如圖9所示的動畫效果。
圖9 圖片的縮放、旋轉和傾斜動畫
例5 旋轉的文字。
在頁面中放置一個類名為container的層作為效果展示容器,在該層中再定義一個3個子層,每個子層中放置一個漢字,為每個漢字所在的層添加動畫效果,第1個漢字水平翻轉,第2個漢字繞中心旋轉,第3個漢字垂直翻轉。編寫完整的HTML程式碼如下。


<!DOCTYPE html> <html> <head> <title>歡樂頌</title> <style> .container { margin: 0 auto; width: 650px; height: 250px; display: flex; flex-direction: row; flex-wrap: wrap; border: 4px solid rgba(255, 0, 0, 0.9); } .container>div { width:200px; height:200px; margin:20px auto; text-align: center; font:800 100px/200px "隸書"; border-radius: 50%; transform-origin:center 50%; } .container>div:nth-child(1) { background:#f00; animation: anim1 2s infinite linear; } @keyframes anim1 { from { transform: rotate(0);} to { transform: rotateX(360deg);} } .container>div:nth-child(2) { background:#0f0; animation: anim2 2s infinite linear; } @keyframes anim2 { from { transform: rotate(0);} to { transform: rotate(360deg);} } .container>div:nth-child(3) { background:#00f; animation: anim3 2s infinite linear; } @keyframes anim3 { from { transform: rotate(0);} to { transform: rotateY(360deg);} } </style> </head> <body> <div class="container"> <div>歡</div><div>樂</div><div>頌</div> </div> </body> </html>
View Code
在瀏覽器中打開保存上述HTML程式碼的html文件,在瀏覽器中呈現出如圖10所示的動畫效果。
圖10 漢字的旋轉
例6 旋轉的風車。
預先準備好一張風車的圖片,在頁面中放置一個類名為container的層作為效果展示容器,將風車圖片作為該層的背景圖片。滑鼠懸停在層上時,風車旋轉,滑鼠移離,風車停止旋轉。編寫完整的HTML程式碼如下。


<!DOCTYPE html> <html> <head> <title>旋轉的風車</title> <style> .container { margin: 0 auto; background-image: url(a1.png); width: 300px; height: 300px; background-position: center center; background-repeat: no-repeat; background-size: cover; border-radius: 50%; vertical-align: middle; border: 4px solid rgba(255, 0, 0, 0.9); } .container:hover { animation: anim 2s linear infinite; } @keyframes anim { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } </style> </head> <body> <div class="container"></div> </body> </html>
View Code
在瀏覽器中打開保存上述HTML程式碼的html文件,在瀏覽器中呈現出如圖11所示的動畫效果。
圖11 旋轉的風車
例7 方和圓。
實現方形變換為圓形,編寫HTML程式碼如下。


<!DOCTYPE html> <html> <head> <title>方和圓</title> <style> .container { margin: 0 auto; width: 350px; height: 250px; border: 4px solid rgba(255, 0, 0, 0.9); } .container>div { width:100px; height:100px; position: relative; left:0; top:75px; animation: anim1 4s infinite; } @keyframes anim1 { from { background:#f00; transform:translate(0,0); } to { background:#00f; transform:translate(250px,0); border-radius: 50%; } } </style> </head> <body> <div class="container"> <div></div> </div> </body> </html>
View Code
在瀏覽器中打開保存上述HTML程式碼的html文件,在瀏覽器中呈現出如圖12所示的動畫效果。
圖12 方和圓的變換