@keyframes & animation


Posted by hoyi-23 on 2021-05-11

Key Frames = 關鍵影格,使用多個關鍵影格來達到動畫的效果。

可以重複執行的設定,是和transition&transform最不一樣的地方。

@keyframes 使用

@keyframes animation-name{
0%{屬性...}
50%{屬性...}
100%{屬性...}
}

百分比代表動畫的時間,開始是0%,結束是100%。

animation 使用

animation-name

剛剛有提到的animation-name,就是動畫的名稱

animation-duration

動畫所需的時間

animation-time-function

動畫漸變的時間方法

  1. ease (default)慢-快-慢
  2. ease-in 慢-快
  3. ease-out 快-慢
  4. ease-in-out 慢-漸快-漸慢
  5. linear 相同速度
  6. cubic-bezier(x1,y1,x2,y2)

animation-iteration-count

執行次數,可以是一個數值,或是infinite(無限次)。
可以重複執行的設定,也是和transition&transform最不一樣的地方。

animation-direction

重複執行時,可以改變方向。
例如:第一次執行時往上,第二次執行時往反方向。

  1. normal(default)相同方向
  2. reverse 相反方向
  3. alternate 奇數為正方向;偶數違反方向。
  4. alternate-reverse 奇數為反方向;偶數違正方向。

animation-play-state

可以設定動畫執行或暫停

  1. running (default)
  2. paused

使用時機: 可以設計,當滑鼠(hover)進入時,動畫暫停;滑鼠移開後,動畫繼續。

div:hover{animation-play-state:paused;}

animation-delay

延遲幾秒後開始

animation-fill-mode

當動畫有延遲開始並且有結束時,我們可以設定它延遲時與結束時的樣式

  1. none(default)
  2. forwards 動畫完成後,保持最後動畫關鍵影格樣式。
  3. backwards 動畫在延遲開始時,保持最初動畫關鍵影格樣式。
  4. both 同時遵照forwards和backwards。

animation 簡易表示法

  1. 全部放一起,順序可以不同,中間以空格區隔就可以。
  2. 若沒有設定就使用預設值。
  3. 同時設定duration和delay,會先判給duration再判給delay,若只有一個數值,會判給duration。

觀看CodePen練習點這裡


#animation #keyframes







Related Posts

content-length mismatch composer laravel

content-length mismatch composer laravel

[ 筆記 ] React 02 - 狀態 state、setState、props

[ 筆記 ] React 02 - 狀態 state、setState、props

Day 89

Day 89


Comments