過度與動畫

1、過渡屬性

① transition-property 屬性 表示可過渡的樣式屬性

transition-property: all | [css1 [...]];
② transition-duration 屬性 表示過渡持續時間
transition-duration: ;
③ transition-delay 屬性 表示過渡延遲時間
transition-delay: ;
④ transition-timing-function 屬性 表示過渡運動曲線
transition-timing-function: linear | ease | ease-in-out | easa-in | ease-out | cubic-bezier();
-- linear：勻速
-- ease：慢快慢
-- ease-in-out：慢快慢
-- easa-in：慢快
-- ease-out：快慢
-- cubic-bezier()：貝賽爾曲線函式
⑤ transition 屬性 表示前四個屬性整體賦值
transition: ;

1、動畫屬性

① animation-name 屬性 表示動畫名(名字任意起)

animation-name: ;
② animation-duration 屬性 表示動畫持續時間
animation-duration: ;
③ animation-delay 屬性 表示動畫延遲時間
animation-delay: ;
④ animation-timing-function 屬性 表示動畫運動曲線
animation-timing-function: linear | ease | ease-in-out | easa-in | ease-out | cubic-bezier();
-- linear：勻速
-- ease：慢快慢
-- ease-in-out：慢快慢
-- easa-in：慢快
-- ease-out：快慢
-- cubic-bezier()：貝賽爾曲線函式
⑤ animation-play-state 屬性 表示動畫狀態
animation-play-state: running | paused
-- running：執行
-- paused：暫停
⑥ animation-fill-mode 屬性 表示動畫結束後的停留位置
animation-fill-mode: forwards | backwards
-- forwards:終點 
-- backwards:起點
⑦ animation-iteration-count 屬性 表示動畫次數
animation-iteration-count: | infinite
-- ：固定次數
-- infinite：無限次
⑧ animation-direction 屬性 表示運動方向
animation-direction: normal | alternate | alternate-reverse;
-- normal：原起點為第一次運動的起點，且永遠從起點向終點運動
-- alternate：原起點為第一次運動的起點，且來回運動
-- alternate-reverse：原終點變為第一次運動的起點，且來回運動

@keyframes 

to{}
}@keyframes 
...100% {}
}

過度與動畫

1,過渡三要素 1.1必須要有屬性發生變化 1.2必須告訴系統哪個屬性需要執行過渡效果 1.3必須告訴系統過渡效果持續時長 2.注意點 當多個屬性需要同時執行過渡效果時用逗號隔開即可 transition property width,background color transition dura...

過度及動畫

1 過渡屬性 transition property 屬性 表示可過渡的樣式屬性 transition property all css1 transition duration 屬性 表示過渡持續時間 transition duration transition delay 屬性 表示過渡延遲時間...

css中的基本簡單動畫與過度效果

css的過渡動畫效果 transform translate transform translate translatex 水平偏移 translatey 垂直偏移 translate x,y 水平垂直偏移 裡面可以寫px或者百分比 百分比參照的是當前盒子的寬和高 所以可以使用translate 5...