異常興奮，今天要做一個小動畫，fighting

CSS動畫

transform

rotate旋轉

• transform-rotate(value) 2D旋轉

translate偏移

• transform-translateX(value) X軸方向偏移value元素

  • 父元素為原點

  • 正值從左到右

  • value要求是一個絕對元素（px|%|em|rem|vh...）

• transform-translateY(value) Y軸方向偏移value元素

  • 父元素為原點

  • 正值從上到下

  • value要求是一個絕對元素（px|%|em|rem|vh...）

• transform-translate(xvalue,yvalue) 混合設定，

  • 父元素為原點

  • xvalue正值從左到右

  • yvalue正值從上到下，可省略為0

  • value要求是一個絕對元素（px|%|em|rem|vh...）

scale縮放

• transform-scaleX(x) X軸方向縮放

  • 中線為原點

  • 拉伸x>1 ，縮放x<1

  • value不需要單位

• transform-scaleY(y ) Y軸方向縮放

  • 中線為原點

  • 拉伸y>1 ，縮放y<1

  • value不需要單位

• transform-scale(x,y) 混合設定，

  • 中線為原點

  • x x軸拉伸和縮放

  • y y軸拉伸和縮放，可省略

  • value不需要單位，y可省略，和x等比例縮放

skew斜切

• transform-skewX(x) X軸方向斜切

  • x軸斜切：

  • x為正值逆時針斜切，x為負值順時針斜切

• transform-skewY(y ) Y軸方向斜切

  • y軸斜切：

  • y為正值順時針斜切，y為負值逆時針斜切

• transform-skew(x,y) 混合設定，

  • 中線為原點

  • x x軸斜切

  • y y軸斜切，可省略值為0

rotate3D旋轉

• transform-rotateX(angle) 在x軸旋轉

• transform-rotateY(angle) 在y軸旋轉

• transform-rotateZ(angle) 在z軸旋轉

• transform-rotate3d(x,y,z,angle) 混合旋轉，引數不能省略

translate3D偏移

• transform-translateZ(value) Z軸方向偏移value元素

  • 父元素為原點

  • value要求是一個絕對元素（px|%|em|rem|vh...）

• transform-translate3D(x,y,z) 混合設定，

  • 父元素為原點

  • value要求是一個絕對元素（px|%|em|rem|vh...）

  • 三個值都不能省略

scale3D縮放

• transform-scaleZ(z) z軸方向縮放

  • 中線為原點

  • 拉伸z>1 ，縮放z<1

  • value不需要單位

• transform-scale3d(x,y,z) 混合設定，

  • 中線為原點

  • 三個值都不能省略

skew3D斜切

• transform-skewZ(z) Z軸方向斜切

  • z軸斜切：

• transform-skew3d(x,y,z) 混合設定，

  • 中線為原點

  • 三個值都不能省略

transform-origin設定轉換元素的原點

• transform-origin(x,y,z) 原點座標

transform-style規定元素在3d空間內的呈現效果

• transform-style(flat|preserve-3d)

  • flat子元素將不保留其 3D 位置

  • preserve-3d子元素將保留其 3D 位置

transform-matrix矩陣

• 具體以後單獨介紹

perspective 3d圖片距離檢視的距離

• perspective(none|number)

  • number元素距離檢視的距離

  • none不設定透視

perspective-origin 透視點

• perspective-origin (x,y)

backface-visibility 元素在背面時，是否使用者可見

• backface-visibility (visible|hidden)

transition過渡

transition-property 設定過渡屬性

• transition-property(none|all|property)

  • none所有的屬性沒有過渡效果

  • all所有的屬性都有過渡效果

  • property指定property屬性有過渡效果

transition-duration 設定過渡時間

• transition-duration(ms|s)

transition-timing-function 以相同的速度從開始到結束的過渡效果

• transition-timing-function(linear|ease|ease-in|ease-out|ease-in-out|step-start|step-end|steps())

  • linear勻速過渡

  • ease規定慢速開始，然後變快，然後慢速結束的過渡效果

  • ease-in規定以慢速開始的過渡效果

  • ease-out規定以慢速結束的過渡效果

  • ease-in-out規定以慢速開始、慢速結束的過渡效果

transition-delay延時過渡時間

• transition-duration(ms|s)

transitio混合設定

• transition(property duration timing-function delay)

animation動畫

animation-name 設定動畫名稱

• animation-name (keyframename|none)

  • none動畫沒有名字

  • keyframename 要繫結到選擇器的關鍵幀的名稱

animation-duration 設定動畫時間

• animation-duration(ms|s)

animation-timing-function 以相同的速度從開始到結束的動畫效果

• animation-timing-function(linear|ease|ease-in|ease-out|ease-in-out|step-start|step-end|steps())

  • linear勻速過渡

  • ease規定慢速開始，然後變快，然後慢速結束的過渡效果

  • ease-in規定以慢速開始的過渡效果

  • ease-out規定以慢速結束的過渡效果

  • ease-in-out規定以慢速開始、慢速結束的過渡效果

animation-delay延時動畫時間

• animation-duration(ms|s)

animation-iteration_count動畫迴圈次數

• animation-duration(infinite|number)

  • infinite無限次

  • number指定次數

animation-direction動畫在重複中是否反向

• animation-direction(normal|reverse|alternate|alternate-reverse)

animation-fill-mode動畫結束後的狀態

• animation-fill-mode(none|fowards|backwards|both)

animation

• animation(混合引數如上)

keyframes 逐步從一個css樣式過渡到另一個css樣式

• keyframe-selectors必需的。動畫持續時間的百分比。

  • 0-100%|from (和0%相同) to (和100%相同) @keyframes mymove{ from {top:0px;} to {top:200px;} }