CSS動畫
CSS動畫是一種瀏覽器上的動態表現形式。
簡介
大約在08年前後，市面上的主流瀏覽器以增強用戶體驗、方便代碼設計為目的，開始增加一些不需要依賴JavaScript的特殊動畫效果的實現。時至今日，這些內容已經被默認為CSS3標準的一部分，是一個瀏覽器所必須要支持的，一般認為它包括：變形（Transforms）、過渡（Transitions）、動畫（Animation）三部分。
變形（Transforms）
變形（Transforms）分為2D變形和3D變形兩種，本質上是使用矩陣向量對元素計算縮放、偏移、傾斜、旋轉等變形，所以2D變形是3階矩陣，具有6個參數、而3D變形則是4階矩陣，具有16個參數。
Matrix
matrix(a,b,c,d,e,f)方法是一個矩陣，是其他所有的2D變形的根本方法。matrix不需要單位。
matrix3d(……)是3D矩陣，很麻煩。
| 矩陣 | ||||||
|---|---|---|---|---|---|---|
| a | c | e | · | x | = | ax+cy+e |
| b | d | f | y | bx+dy+f | ||
| 0 | 0 | 1 | 1 | 0+0+1 | ||
表中x、y表示換換前坐標。
例子：
<!--向左、下分别移动10像素的距离。--> <div style="display:inline-block;background-color:#000;width:100px;height:100px;"> <div style="background-color:#fff;width:10px;height:10px;transform:translate(10px,10px)"> </div> </div> <!--换成矩阵的书写方式。--> <div style="display:inline-block;background-color:#000;width:100px;height:100px;"> <div style="background-color:#fff;width:10px;height:10px;transform:matrix(1,0,0,1,10,10)"> </div> </div>
Translate
Translate是需要單位的。
translate(x,y)是2D坐標轉換，x表示橫向偏移，y表示縱向偏移。
translate3d(x,y,z)是3D坐標轉換，
translateX(x)是X軸的坐標轉換，translateY(y)是Y軸的坐標轉換。
translateZ(z)是Z軸的坐標轉換，是3D坐標轉換。
公式：translate(x,y)=matrix(1,0,0,1,x,y)
Scale
scale(x,y)是定義一個2D縮放。
scale(x,y)是2D坐標縮放，x表示橫向縮放，y表示縱向縮放。
scaleX(x)是X軸的縮放，scaleY(y)是Y軸的縮放。
scaleZ(z)是Z軸的縮放，是3D縮放轉換。
公式：scale(x,y)=matrix(x,0,0,y,0,0)
Rotate
rotate(angle)是定義一個2D旋轉，angle表示一個角度，單位是deg。
rotate3d(x,y,z,angle)是定義一個3D旋轉。
rotateX(angle)定義沿著X軸的3D旋轉，rotateY(angle)定義沿著Y軸的3D旋轉，rotateZ(angle)定義沿著Z軸的3D旋轉。
公式：rotate(θ)=matrix(cosθ,sinθ,-sinθ,cosθ,0,0)
注意：第三個值前面帶了一個負號，這是奇偶性問題，這裡不做展開。
Skew
skew(x,y)是定義一個2D傾斜轉換，x表示X軸的傾斜轉換，y表示Y軸的傾斜轉換。
skew3d(x,y,z)是一個3D傾斜轉換。
skewX(x)是X軸的傾斜轉換，skewY(y)是Y軸的傾斜轉換。
公式：skew(x,y)=matrix(1,tan y,tan x,1,0,0)
Perspective
perspective(n)定義3D透視。
例子
關於3D轉換的小例子：
過渡（Transitions）
默認的簡寫方法是：transition: transition-property transition-duration transition-timing-function Transition-delay
Property
transition-property定義需要進行過渡效果屬性名稱，這個屬性一定要是可以連續變化的，比如：寬高、字號、顏色等。
可以聲明多個屬性同時開始過渡，以逗號隔開即可，all表示這個元素的所有屬性都將進行過渡。
Duration
transition-duration定義過渡效果花費的時間，默認是0，單位是ms，0意味著不會有任何變化。
Timing-function
transition-timing-function規定過渡效果的時間曲線，默認是"ease"。
它可以是以下參數或方法。
- 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)聲明一個方法，規定一個貝塞爾曲線函數定義時間曲線，各個n的有效值是0到1[1]。
Transition-delay
transition-delay定義過渡效果的延遲時間，單位是ms，默認是0，0意味著不延遲，立即開始。
例子
動畫（Animation）
參考：{{M-animation}}，通過調整旋轉的角度以及動畫播放速度，可以得到不同的效果。（示例播放次數的參數為無限循環：animation-iteration-count:infinite;）
注意：滑鼠懸停以此打斷Mea右手（的動畫播放）。
{{M-animation}}<div style="display:inline-blockposition:relative;width:500px;height:666px;">
<div style="position:absolute;z-index:3;left:0;top:0;">{{image|img=神楽めあ2.jpg|width=500|height=666|resize=500}}</div>
<div class="moe-ani-count-infinite ani-time-1 ani-rotate30-re"
style="position:absolute;z-index:5;left:185px;top:175px;transform-origin:30% 90%;transform:rotate(-30deg);">
{{image|img=神楽めあ2.jpg|width=50|height=80|resize=500|x=185|y=175}}
</div>
</div>
<div class="moe-animation" style="display:inline-block;position:relative;width:500px;height:666px;">
<div style="position:absolute;z-index:3;left:0;top:0;">{{image|img=神楽めあ2.jpg|width=500|height=666|resize=500}}</div>
<div class="ani-hover moe-ani-count-infinite ani-time-01 ani-rotate360"
style="position:absolute;z-index:5;left:185px;top:175px;transform-origin:30% 90%;transform:rotate(-30deg);">
{{image|img=神楽めあ2.jpg|width=50|height=80|resize=500|x=185|y=175}}
</div>
</div>
animation
所有動畫屬性的簡寫屬性，除了 animation-play-state 屬性。
@keyframes
@keyframes規定動畫關鍵幀，它只能寫在樣式表里，沒辦法寫在內聯樣式中。
from等於0%，to等於100%，中途也可以使用百分比數值增加更多的關鍵幀，具體時間還是duration定義的總時長。
/* 比如将样式的颜色从red变为black */
@keyframes seecolor1
{
from {color:red;}
to {color:black;}
}
@keyframes seecolor2
{
0% {color:red;}
50% {color:blue}
100% {color:black;}
}
name
animation-name：規定由@keyframes定義的動畫的名稱，具有這個屬性的元素將會執行@keyframes規定的動畫。
duration
animation-duration定義動畫效果完成一個周期所花費的時間，默認是0，單位是ms。
timing-function
animation-timing-function規定動畫的速度曲線。默認是 "ease"，同過渡一樣。
delay
animation-delay定義動畫效果的延遲時間，單位是ms，默認是0，0意味著不延遲，立即開始。
iteration-count
animation-iteration-count定義動畫播放的次數，默認是1，infinite將會無限次循環播放。
direction
animation-direction定義動畫完成一次周期後，在下一周期內是否逆向地播放。默認是normal，alternate將會正向逆向交替播放。
play-state
animation-play-state規定動畫播放狀態，默認是播放中running，paused是暫停狀態。通過js可以對元素的這一屬性進行更改，可以播放或暫停。
fill-mode
animation-fill-mode規定元素在動畫播放之外的狀態。
- none：不改變默認行為。
- forwards：動畫完成後，保持在最後一個關鍵幀中定義的樣式。
- backwards：動畫開始前，animation-delay中，應用在第一個關鍵幀中定義的樣式。
- both：同時具有兩種屬性。
例子
紅葉
| ||||||||||||||||||||||||||||||||||||||||||