css3變形 過渡 動畫
阿新 • • 發佈：2017-08-08
func 定義 iter css3 執行 lex pre 逗號 -c
/* */，[email protected]）
CSS3 變形/變換
相關屬性
- transform 設置或檢索對象的檢索（none 2D 3D）
- transform-origin：設置或檢索對象以某個原點進行檢索
- transform-style: flat（默認）指定子元素位於次元素所在平面內/preserve-3d 指定子元素定位在三維空間內
- perspective: 長度單位 指定觀察者距離平面的距離
- perspective-origin 指定觀察者的位置 left/right/center
- backface-visibialbe: visible(默認)/hidden
變形方法 transform-function
- 2d
- 位移
- translate(x,y)
- translatex()
- translatey()
- 縮放
- scale(x,y)
- scalex()
- scaley()
- 旋轉
- rotate(deg)
- 傾斜
- skew(x,y)
- skewx()
- skewy()
- 3d
- 位移
- translatez()
- translate3d(x,y,z)
- 縮放
- scalez()
- scale3d(x,y,z)
- 旋轉
- rotatex()
- rotatey()
- rotatez()
- rotate3d(x,y,zdeg)
CSS過渡
相關屬性
- trasition
- transition-property 設置對象中的參與過渡屬性 (可以設置多個屬性值，以逗號隔開)
- 默認為all：所有可以進行過渡的css屬性
- none:不指定過渡的css屬性
- transition-timing-function 設置對象過渡持續的時間
- transition-duriation
- transition-delay
觸發時機
- 偽類選擇器
- JS觸發
- 媒體查詢
可以過渡的屬性
- 長度
- 顏色
- 變換
CSS3 動畫
相關屬性
-
關鍵幀語法：@keyframes{from to }
-
animation 設置對象所應用的動畫特效，如果提供多組屬性值，以逗號進行分割
- 註意：如果只提供一個time參數，則為動畫的持續時間；
- 若提供二個time參數，則第一個為持續時間，第二個為拖延時間
- animation-name 設置對象所應用的動畫名稱（[email protected]
- 值：ease(默認)平滑過渡，由快到慢
- linear: 線性過渡
- ease-in:由慢到快
- ease-out:由快到慢
- ease-in-out:由慢到快再到慢
- number：動畫循環次數
- infinite:無線循環
- normal 正常反向（默認）
- reverse 反方向運行
- alternate:動畫先正常運行後反向運行，並持續交替運行
- alternate-reverse:動畫先反向運行後再正向運行，並持續交替運行
- none 默認值。動畫在動畫執行之前和之後不會應用任何樣式到目標元素
- forwards 在動畫結束後（由animation-literation-count決定），動畫將應用該屬性值
- backwards:動畫將應用在animmation-delay定義期間啟動動畫的第一次叠代的關鍵幀中定義的屬性值
- both 動畫遵循forwards和backwards的規則。也就是說，動畫會在兩個方向上擴展動畫屬性
關鍵幀
#keyframes 動畫名稱{
form{
}
to{
}
}css3變形 過渡 動畫