transition動畫
| 語法 | 說明 |
|---|---|
| transition-propety | 設置過渡的屬性 |
| transition-duration | 設置過渡的時間 |
| transition-timing-function | 設置過渡的運動方式 |
| transition-delay | 設置動畫的延遲 |
| transition:property duration timing-function delay | 同時設置四種屬性 |
格式為:在哪產生動畫、動畫的時間、運動曲線、延遲
過渡的運動方式包含以下幾種:
- linear 勻速
- ease 開始和結束慢速
- ease-in 開始時慢速
- ease-out 結束時慢速
- ease-in-out 開始和結束時慢速（相當于ease）
- cubic-bezier（n,n,n,n）
比如:cubic-bezier（-0.845,-0.375,0.215,1.335）
transform 變換
| 語法 | 說明 |
|---|---|
| translate(x,y) | 設置盒子位移 |
| scale(x,y) | 設置盒子縮放 |
| rotate(deg) | 設置盒子旋轉 |
| skew(x-angle,y-angle) | 設置盒子斜切 |
| perspective | 設置透視距離 |
| transform-style flat:preserve-3d | 設置盒子是否按3d空間顯示 |
| translateX、translateY、translateZ | 設置三維移動 |
| rotateX、rotateY、rotateZ | 設置三維旋轉 |
| scaleX、scaleY、scaleZ | 設置三維縮放 |
| tranform-origin | 設置變形的中心點 |
| backface-visibility | 設置盒子背面是否可見 |
animation動畫
1、@keyframes 定義關鍵幀動畫
2、animation-name 動畫名稱
3、animation-duration 動畫時間
4、animation-timing-function 動畫曲線
linear 勻速
ease 開始和結束慢速
ease-in 開始是慢速
ease-out 結束時慢速
ease-in-out 開始和結束時慢速
steps 動畫步數
5、animation-delay 動畫延遲
6、animation-iteration-count 動畫播放次數 n|infinite
7、animation-direction
normal 默認動畫結束不返回
Alternate 動畫結束后返回
8、animation-play-state 動畫狀態
paused 停止
running 運動
9、animation-fill-mode 動畫前后的狀態
none 不改變默認行為
forwards 當動畫完成后，保持最后一個屬性值（在最后一個關鍵幀中定義）
backwards 在 animation-delay 所指定的一段時間內，在動畫顯示之前，應用開始屬性值（在第一個關鍵幀中定義）
both 向前和向后填充模式都被應用
10、animation:name duration timing-function delay iteration-count direction;同時設置多個屬性
