1、transition-property 設(shè)置過渡的屬性酗洒,比如:width height background-color
2士修、transition-duration 設(shè)置過渡的時間枷遂,比如:1s 500ms
3、transition-timing-function 設(shè)置過渡的運動方式
linear 勻速
ease 開始和結(jié)束慢速
ease-in 開始是慢速
ease-out 結(jié)束時慢速
ease-in-out 開始和結(jié)束時慢速
cubic-bezier(n,n,n,n)
比如:cubic-bezier(0.845, -0.375, 0.215, 1.335)
曲線設(shè)置網(wǎng)站:https://matthewlein.com/ceaser/
4棋嘲、transition-delay 設(shè)置動畫的延遲
5酒唉、transition: property duration timing-function delay 同時設(shè)置四個屬性
CSS3 transform變換
1、translate(x,y) 設(shè)置盒子位移
2沸移、scale(x,y) 設(shè)置盒子縮放
3痪伦、rotate(deg) 設(shè)置盒子旋轉(zhuǎn)
4、skew(x-angle,y-angle) 設(shè)置盒子斜切
5雹锣、perspective 設(shè)置透視距離
6网沾、transform-style flat | preserve-3d 設(shè)置盒子是否按3d空間顯示
7、translateX蕊爵、translateY辉哥、translateZ 設(shè)置三維移動
8、rotateX攒射、rotateY醋旦、rotateZ 設(shè)置三維旋轉(zhuǎn)
9、scaleX会放、scaleY饲齐、scaleZ 設(shè)置三維縮放
10、tranform-origin 設(shè)置變形的中心點
11鸦概、backface-visibility 設(shè)置盒子背面是否可見
CSS3 animation動畫
1箩张、@keyframes 定義關(guān)鍵幀動畫
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 當動畫完成后脓诡,保持最后一個屬性值(在最后一個關(guān)鍵幀中定義)
backwards 在 animation-delay 所指定的一段時間內(nèi),在動畫顯示之前媒役,應用開始屬性值(在第一個關(guān)鍵幀中定義)
both 向前和向后填充模式都被應用
10祝谚、animation:name duration timing-function delay iteration-count direction;同時設(shè)置多個屬性