深入理解CSS3動畫：animation、transform、transition

喜歡的小夥伴可以關注我我哦，本人喜歡一些小動畫。

深入理解CSS3動畫

前言

在CSS3之前，動畫主要都是以JavaScript或者Gif圖片來實現，但是實現效果並不是很理想或者製作起來很麻煩，自有了CSS3之後很多動畫幾句代碼即可實現，方便，快速，性能更好。

一、animation

我們通過一個簡單的例子來理解：延遲1秒執行，從左0往右100px無限循環來回移動；

div {
    width: 80px;
    height: 80px;
    background: #f30;
    position: relative;
    animation-name: test;
    animation-duration: 3s;
    animation-timing-function: linear;
    animation-delay: 1s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    /* 
    簡寫屬性
    animation: test 1s linear 1s infinite alternate;
    */
}
@keyframes test {
    0% { left: 0;}
    100% { left: 100px;}
}

【在線瀏覽】

怎麼樣，是不是覺得so easy？對，就是這麼簡單！下面來詳細講解下這個代碼：

1.語法：

@keyframes test {
    0% { left: 0;}
    100% { left: 100px;}
}

當然也可以設置多個階段，會有不同的效果喲，下面讓我們來圍着四周跑一圈：

@keyframes test {
    0% { left: 0; top: 0;}
	25% { left: 0; top: 50px;}
	50% { left: 50px; top: 50px;}
	75% { left: 50px; top: 0;}
    100% { left: 0; top: 0;}
}

【在線瀏覽】

2.動畫屬性

animation-name
綁定到選擇器的 keyframe 名稱，簡單來說就是名字。

animation-name: keyframename | none;

animation-duration
完成動畫所花費的時間，單位秒或毫秒，例：3s、3000ms。

animation-duration: time;

animation-timing-function
規定動畫的速度曲線，默認ease。

animation-delay
規定在動畫開始之前的延遲，很好理解，就是延遲（等待）多長時間再執行動畫（單位秒或毫秒）。

animation-delay: time;

animation-iteration-count
規定動畫播放次數，默認1；n（次數），infinite（無限）。

animation-iteration-count: n | infinite;

animation-direction
規定是否應該輪流反向播放動畫；normal（正常播放），alternate（交替播放），reverse（倒序播放），alternate-reverse（反向交替播放）。

animation-direction: normal | alternate | reverse | alternate-reverse;

animation-fill-mode
規定動畫在播放之前或之後，其動畫效果是否可見。
forwards：當動畫完成後，保持最後一個屬性值（在最後一個關鍵幀中定義）。
backwards：在 animation-delay 所指定的一段時間內，在動畫顯示之前，應用開始屬性值（在第一個關鍵幀中定義）。
both：向前和向後填充模式都被應用。

animation-fill-mode : none | forwards | backwards | both;

animation-play-state
規定動畫正在運行還是暫停，paused（動畫已暫停），running（動畫正在播放）。

animation-play-state: paused | running;

【在線演示】

二、transform

transform可以用來設置元素的形狀改變，主要有以下幾種變形：

1.rotate - 旋轉

旋轉分爲2D旋轉和3D旋轉；
正數爲順時針旋轉，負數爲逆時針旋轉，單位：deg；

transform-origin
旋轉元素一般配合着transform-origin屬性，transform-origin是用來設置旋轉點的；

transfrom-origin:0px 0px; // 這裏代表左上角0那個位置
transfrom-origin:center center; // 代表中心點，也是默認值

2. 2D旋轉

transform: rotate(45deg); // 順時針旋轉45度

【在線瀏覽】

另外，我們可以結合animation，然後就可以出現以下效果，就可以一直轉圈圈：

@keyframes test{
	0%{ transform: rotate(0)}
	100%{ transform: rotate(360deg);}
}

3. 3D旋轉

transform: rotate3d(x,y,z,angle);

x：是一個0到１之間的數值，主要用來描述元素圍繞X軸旋轉的矢量值。
y：是一個0到１之間的數值，主要用來描述元素圍繞Y軸旋轉的矢量值。
z：是一個0到１之間的數值，主要用來描述元素圍繞Z軸旋轉的矢量值。
angle：一個角度值，指定在3D空間旋轉角度。

【在線預覽】

3.1 scale - 縮放

transfrom:scale(x,y);

x：表示水平方向縮放的倍數。
y：表示垂直方向縮放的倍數，y爲可選參數，不設置則表示x，y同時縮放相同倍數。

當然爲了效果看起來看流程，我們結合animation使用，就可以看到一個由小變大的效果：

@keyframes test{
	0%{ transform: scale(0.5)}
	100%{ transform: scale(1.5);}
}

3.2 skew - 扭曲

transform: skew(x,y);

x：x軸(水平方向)傾斜
y：y軸(水平方向)傾斜

【在線預覽】

這裏我們設置的參數爲：transform: skew(45deg,0)等同於transform: skew(45deg)，也就是x軸順時針45度。

3.3 translate - 移動

這個參數很簡單，俗稱：位移。

三、transition

transition屬性設置元素當過渡效果，CSS過渡目前是比較常用的，它一共有4個子屬性：

transition-property: 過渡屬性，默認值：all；
transition-duration: 過渡持續時間，默認值：0s；
transiton-timing-function: 過渡函數，默認值：ease；
transition-delay: 過渡延遲時間，默認值：0s；

div {
	width: 80px;
	height: 80px;
	background: #be2323;
	transition-duration: 2s;
	transition-property: width;
	transition-timing-function: linear;
	transition-delay: 0s;
	/* 簡寫屬性
	transition: width 2s linear 0s;
	*/
}
div:hover{
	width: 300px;
}

4個子屬性和文章第一大點：animation相同，認真看下來的朋友，都應該瞭解用法了，這裏就不再做詳述了。

四、後記

以上爲CSS3幾種動畫方式，幾大屬性都可以相互結合使用，比如說transform配合transition過度，就會把本身變化缺失的過程補充完整，從而得到一個完善、流暢的動畫效果。
當然學會了CSS3動畫，不能把JS給遺忘了，CSS3+JS是可以寫出很多酷炫效果及提升用戶體驗的，比如基本的點擊播放動畫，暫停動畫，圖片逐漸方法等等，就不一一說了，前端注重用戶體驗，相互的合理使用，用戶體驗是能做到極大的提升的。
更多的東西大家就自己去探索了，多讀、多寫，就會有提升！
大家如果有什麼好的想法或見解，歡迎評論區溝通，謝謝！
喜歡我的小夥伴可以關注我哦