CSS变形
css3 變形/變換
相關屬性
- transform
- transform-origin
- transform-style:flat/preserve-3d
- perspective: 長度單位
- perspective-origin觀察者的位置
- backface-visibialbe:visible/hidden
變形方法 transform-function
- 2d
- translate() 位移(像素/百分號)
- translatex()
- translatey()
- scale() 縮放(倍數)
- scalex()
- scaley()
- rotate() 旋轉(角度deg)
- skew() 扭曲(角度)x扭曲y變x不變
- skewx()
- skewy()
- 3d
- translatez()
- translate3d()
- scalez()
- scale3d()
- rotatex()
- rotatey()
rotatez()
css過渡
相關屬性
- transition
- transition-property過渡屬性
- none
all所有可以進行過渡的CSS屬性
- transition-timing-function 過渡方式
- linear： 線性過渡
- ease： 平滑過渡。
- ease-in： 由慢到快。
- ease-out： 由快到慢
ease-in-out： 由慢到快再到慢
- transition-duriation過渡時間
transition-delay延遲
觸發時機
- 偽類選擇器
- JS
媒體查詢
CSS3動畫
相關屬性
- animation
- animation-name動畫名稱
- animation-iteration-count循環次數infinite無限循環
animation-duration動畫持續時間
- animation-timing-function動畫的過渡類型
- linear： 線性過渡
- ease： 平滑過渡。
- ease-in： 由慢到快。
- ease-out： 由快到慢
ease-in-out： 由慢到快再到慢。
- animation-delay動畫延遲時間
- animation-dirction動畫方向
- normal： 正常方向
- reverse： 反方向運行
- alternate： 動畫先正常運行再反方向運行，并持續交替運行
- alternate-reverse： 動畫先反運行再正方向運行，并持續交替運行
- animation-play-state:running運動/pasused暫停
- animation-fill-mode:動畫時間之外的狀態
- none： 默認值。不設置對象動畫之外的狀態
- forwards： 設置對象狀態為動畫結束時的狀態
- backwards： 設置對象狀態為動畫開始時的狀態
both： 設置對象狀態為動畫結束或開始的狀態
關鍵幀
@keyframes 動畫名稱{form{}to{} }轉載于:https://www.cnblogs.com/DCL1314/p/7305995.html
總結
