過渡與動畫

一、過渡

1、過渡屬性

① transition-property 屬性 表示可過渡的樣式屬性
transition-property: all | [css1 [...]];

② transition-duration 屬性 表示過渡持續時間
transition-duration: <time>;

③ transition-delay 屬性 表示過渡延遲時間
transition-delay: <time>;

④ 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: <transition-property> <transition-duration> <transition-delay> <transition-timing-function>;

二、動畫

1、動畫屬性

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

② animation-duration 屬性 表示動畫持續時間
animation-duration: <time>;

③ animation-delay 屬性 表示動畫延遲時間
animation-delay: <time>;

④ 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: <count> | infinite
-- <count>：固定次數
-- infinite：無限次

⑧ animation-direction 屬性 表示運動方向
animation-direction: normal | alternate | alternate-reverse;
-- normal：原起點為第一次運動的起點，且永遠從起點向終點運動
-- alternate：原起點為第一次運動的起點，且來回運動
-- alternate-reverse：原終點變為第一次運動的起點，且來回運動

2、動畫體

@keyframes <name>{
    /*from未寫任何屬性設定時，預設全部取初始值（初始狀態）*/
    from{}
    to{}
}

@keyframes <name>{
    0% {}
    ...
    100% {}
}

v_hint：動畫屬性設定給指定選擇器標籤，動畫體在樣式中單獨設定