慕課前端入門-CSS動畫
阿新 • • 發佈：2020-09-06
1.CSS動畫
視覺暫留原理：人類具有視覺暫留的特性。人的眼睛在看到一幅畫或一個物體後，在0.34秒內不會消失。
動畫原理：通過把人物的表情、動畫變化等分解後，畫成許多動作，利用視覺暫留，在一幅畫還沒有消失前播放下一副畫，就會給人造成一種流暢的視覺變化效果
CSS動畫：是元素從一種樣式逐漸變化為另一種樣式的效果
1.1 CSS動畫屬性
| 屬性 | 說明 | 示例 |
|---|---|---|
| animation-name | 檢索或設定物件所應用的動畫名稱 •keyframename：指定要繫結到選擇器的關鍵幀名稱 •none：指定沒有動畫(可用於覆蓋從級聯的動畫) | div.green{ |
| animation-duration | 檢索或設定物件動畫的持續時間 •time 預設值為0，意味著沒有動畫效果 |
|
| nimation-timing-function | 控制物件動畫執行速度 •linear:線性過渡，等同於貝塞爾曲線(0.0, 0.0, 1.0, 1.0) •ease：平滑過渡，等同於貝塞爾曲線( 0.25, 0.1, 0.25, 1.0) •ease-in：由慢到快，等同於貝塞爾曲線( 0.42, 0.0, 1.0, 1.0) •ease-out：由快到慢，等同於貝塞爾曲線( 0, 0, 0.58, 1.0) •ease-in-out：由慢到快再到慢，等同於貝塞爾曲線( 0.42, 0, 0.58, 1.0) •step-start：等同於step(1, start) •step-end：等同於step(1, end) •step( 第一個引數：必須為正整數，指定函式的步數。 第二個引數：取值可是start或end，指定每一步的值發生變化的時間點。可選，預設end •cubic_bezier(number, number, number, number)自定義貝塞爾曲線，數值需在[0,1]區間內 |
|
| animation-delay | 檢索或設定物件動畫的延遲時間 人話就是動畫開始前等待的時間 •time 以秒或毫秒計，預設0 |
|
| animation-iteration-count | 檢索或設定物件動畫的迴圈次數 •infinity:無限迴圈 •number：指定次數，預設值是1 |
|
| animation-direction | 檢索或設定物件動畫在迴圈中是否反向運動 •normal：正常方向 •reverse：反方向執行 •alternate：動畫先正常執行再反方向執行，並持續交替執行。搭配迴圈，才有效果。 •alternate-reverse：動畫先反方向再正方向執行，並持續交替執行。搭配迴圈，才有效果 • |
|
| animation-fill-mode | 規定當動畫不播放時(當動畫完成或當動畫有延遲未開始播放時)，要應用到元素的樣式 •none：預設值，不設定物件動畫之外的狀態 •forwards：設定物件狀態為動畫結束時的狀態 •backwards：設定物件狀態為動畫開始時的狀態 •both：設定物件為動畫結束或開始的狀態 |
|
| animation-play-state | 指定動畫是否正在執行或已暫停 •paused：指定暫停動畫 •running：預設值，指定正在執行的動畫 |
div{... |
| animation | 複合屬性： animation:name during timing-function delay iteration-count direction fill-mode play-state name和during是必須的，會優先判斷這兩個值 |
div.green{ |
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css">
body{background:#abcdef;}
div{position: relative;width: 760px;height: 760px;margin:auto;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-otransform-style: preserve-3d;
transform-style: preserve-3d;
}
.common{position: absolute;top: 0;right: 0;bottom: 0;left: 0;width: 100%;height: 100%;margin:auto;}
div.red{
background:url(red.png) no-repeat center;transform: rotateY(-45deg);
-webkit-animation-name: circle_red;
animation-name: circle_red;
-webkit-animation-duration: 10s;
animation-duration: 10s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-delay: 2s;
animation-delay: 2s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
animation-direction: alternate;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
div.blue{
background:url(blue.png) no-repeat center;transform: rotateX(-45deg);
-webkit-animation-name: circle_blue;
animation-name: circle_blue;
-webkit-animation-duration: 10s;
animation-duration: 10s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-delay: 2s;
animation-delay: 2s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
animation-direction: alternate;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
div.green{
background:url(green.png) no-repeat center;transform: rotateZ(-45deg);
-webkit-animation: circle_green 10s linear 2s infinite alternate forwards;
animation: circle_green 10s linear 2s infinite alternate forwards;
}
div.wechat{
background:url(wechat.png) no-repeat center;
}
div:hover{
cursor: pointer;
-webkit-animation-play-state: running;
animation-play-state: running;
}
@keyframes circle_red{
from{transform: rotateX(0deg);}
to{transform: rotateX(360deg);}
}
@keyframes circle_green{
from{transform: rotateY(0deg);}
to{transform: rotateY(360deg);}
}
@keyframes circle_blue{
from{transform: rotateZ(0deg);}
to{transform: rotateZ(360deg);}
}
</style>
</head>
<body>
<div>
<div class="wechat"></div>
<div class="red common"></div>
<div class="blue common"></div>
<div class="green common"></div>
</div>
</body>
</html>
2.關鍵幀
可以指定任何順序排列來決定animation動畫變化的關鍵位置。
使用說明：使用@keyframes規則建立動畫，通過逐步改變從一個CSS樣式設定到另一個。
在動畫過程中，可以通過keyframes規則多次更改CSS樣式的設定。
@keyframes animationname{
keyframes-selector:{ CSS-style }
}
/*
animationname：動畫名稱，必需，
keyframes-selector：必需，動畫持續時間的百分比，0-100%，from是0，同時100%
CSS-style:必需，一個或多個合法的CSS樣式屬性
*/
示例
@-webkit-keyframes circle-inner{
0%{ transform: rotateX(0deg); }
25% { transform: rotateX(45deg); }
75% { transform: rotateX(315deg); }
100% { transform: rotateX(360deg) ;}
}
3.will change
CPU：中央處理器，解釋計算機指令以及處理計算機軟體中的資料
GPU：圖形處理器，專門處理和繪製圖形相關的硬體，GPU是專為執行復雜的數學和幾何計算而設計的。有了它，CPU就從圖形處理的任務中解放出來，可以執行其他更多的系統任務。
現狀：CSS的動畫、變形、漸變並不會自動觸發GPU加速，而是使用瀏覽器的軟體渲染引擎(慢)。在transition、transform、animation的世界裡，應該將程序委託GPU執行以加快速度。
只有3D變形會有自己的layer，2D變形不會。因此可以使用will change為元素新增沒有變化的3D變形，以騙取瀏覽器觸發硬體加速。
使用will change的代價：向他自己的層疊加元素，佔用RAM和GPU儲存空間。
will-change:引數;
/*
auto:表示沒有特定的意圖，適用於它通常所做的任何啟發式和優化
scroll-position:表示將要改變元素的滾動位置
contents:表示將要改變元素的內容
<custom-ident>:明確指定將要改變的屬性與給定的名稱
<animatable-feature>:可動畫的一些特徵值，比如left、top、margin等
*/
示例
.common{
position: absolute;top: 0;right: 0;bottom: 0;left: 0;width: 100%;height: 100%;margin:auto;
-webkit-will-change:transform;
-moz-will-change:transform;
will-change:transform;
}
注意：不要濫用，需要提前申明，remove