transition動畫
| 語法 | 說明 |
|---|---|
| transition-propety | 設置過渡的屬性 |
| transition-duration | 設置過渡的時間 |
| transition-timing-function | 設置過渡的運動方式 |
| transition-delay | 設置動畫的延遲 |
| transition:property duration timing-function delay | 同時設置四種屬性 |
格式為:在哪產(chǎn)生動畫馅巷、動畫的時間念搬、運動曲線械荷、延遲
過渡的運動方式包含以下幾種:
- linear 勻速
- ease 開始和結(jié)束慢速
- ease-in 開始時慢速
- ease-out 結(jié)束時慢速
- ease-in-out 開始和結(jié)束時慢速（相當于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) | 設置盒子旋轉(zhuǎn) |
| skew(x-angle,y-angle) | 設置盒子斜切 |
| perspective | 設置透視距離 |
| transform-style flat:preserve-3d | 設置盒子是否按3d空間顯示 |
| translateX搜贤、translateY、translateZ | 設置三維移動 |
| rotateX锯岖、rotateY介袜、rotateZ | 設置三維旋轉(zhuǎn) |
| scaleX、scaleY出吹、scaleZ | 設置三維縮放 |
| tranform-origin | 設置變形的中心點 |
| backface-visibility | 設置盒子背面是否可見 |
animation動畫
1遇伞、@keyframes 定義關鍵幀動畫
2、animation-name 動畫名稱
3捶牢、animation-duration 動畫時間
4碴倾、animation-timing-function 動畫曲線
linear 勻速
ease 開始和結(jié)束慢速
ease-in 開始是慢速
ease-out 結(jié)束時慢速
ease-in-out 開始和結(jié)束時慢速
steps 動畫步數(shù)
5惯退、animation-delay 動畫延遲
6、animation-iteration-count 動畫播放次數(shù) n|infinite
7、animation-direction
normal 默認動畫結(jié)束不返回
Alternate 動畫結(jié)束后返回
8示绊、animation-play-state 動畫狀態(tài)
paused 停止
running 運動
9魂务、animation-fill-mode 動畫前后的狀態(tài)
none 不改變默認行為
forwards 當動畫完成后脂男，保持最后一個屬性值（在最后一個關鍵幀中定義）
backwards 在 animation-delay 所指定的一段時間內(nèi)发皿，在動畫顯示之前，應用開始屬性值（在第一個關鍵幀中定義）
both 向前和向后填充模式都被應用
10炒考、animation:name duration timing-function delay iteration-count direction;同時設置多個屬性
