Day8 | Animation、Transition、Transform 動畫效果

❒ Animation 、 Transition、Transform 差異

Animation

  • 需搭配關鍵影格 @keyframes 使用,因可定義多影格,所以適用較細微的動畫,
  • 運作方式:不需事件觸發網頁加載就會執行。

Transform

  • 可控制元素的移動、縮放、旋轉、傾斜。
  • 運作方式:不需事件觸發網頁加載就會執行。
  • transition 可於 animation 中被當屬性運用。

Transition

  • Transition 只能定義開始和結束狀態,不適用較細微的動畫。
  • 運作方式:需事件觸發動畫才會開始,動畫為一次性,無法重覆發生除非一再觸發。

❒ Animation 動畫

Animation 結構

animation 需搭配關鍵影格 @keyframes 使用。@keyframes 內部結構有兩種寫法:

  • fromto :只能定義頭語尾的影格變化。
  • % :可以定義更多階段的影格變化。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
/*方式一:使用 @keyframes 定義,後面customname為自訂名稱,搭配 form to 頭尾的撰寫方式 */
@keyframes customname {
/* 定義每個階段的影格變化 */
from {
/* 定義元素在該影格所套用的樣式 */
..
}
to {
..
}
}
/*方式二:使用 @keyframes 定義,後面customname為自訂名稱,搭配%的撰寫方式 */
@keyframes customname {
/* 定義每個階段的影格變化 */
0% {
/* 定義元素在該影格所套用的樣式 */
..
}
50% {
..
}
100% {
..
}
}

animation 屬性

這邊只列出一些常用的屬性

  • animation-name → 要執行的 animation 名稱。
  • animation-duration → 執行過程秒數。
  • animation-play-state → 播放狀態,預設是 running
    • 狀態可設定 pause 搭配 :hover
  • animation-timing-function → 動畫的加速速率。
  • animation-delay → 延遲多少時間發動 animation。
  • animation-iteration-count → 動畫要重複播放幾次。
    • 屬性值 infinite 為一直持續跑
  • animation-fill-mode → 動畫未播放或動畫完成時,要停在哪個影格 ( 呈現的樣子 )。
    • none 預設值,動畫執行前或之後不會對元素產生任何樣式。
    • forward 停留在最後一個影格位置( 結束時的狀態 )。
    • backwards 留在第一個影格位置 ( 開始時的狀態 )。
    • both 擁有 forwardbackwards 兩者功能,依據開始或結束決定呈現的狀態。
  • animation-direction → 是否要循環交替反向播放動畫。
    • normal 預設值,動畫正常播放
    • reverse 動畫反向播放
    • alternate 動畫在奇數時正向播放,偶數值反向播放。
    • alternate-reverse 動畫在奇數時反向播放,偶數值正向播放。

Animation 使用方式

  1. 建立影格 @keyframes,並自訂名稱
    1. 有兩種撰寫方式,可看上方的「 Animation 結構 」。
  2. animation 載入影格
    1. animation 需對應一個 @keyframes 自訂名 ( animation-name:@keyframes 自訂名; )。
    2. 須包含兩個以上的屬性才能運作。

註 :如果不想要使用 animation-fill-mode:both; ,可於 @keyfarmes 中的開始與結束數值寫一樣並搭配 animation-iteration-count : infinite;,就會很順的重複跑。

實作 1. Animation 使用 fromto 讓物件移至右方再回來原點

CodePen 範例

實作 2. Animation 使用 % 讓物件繞一圈正方形

CodePen 範例

❒ Transition 轉場效果

transition 屬性

  • transition-duration : 動畫播放的時間。
  • transition-timing-function:動畫執行過程的速度變化。
  • transition-delay:延遲多少時間再發動動畫。
  • transition-property:要更精確地掌控,可定義哪些 CSS 屬性有轉場的動畫效果
    • all : 預設,所有 CSS 都要轉場。
    • none : 沒有任何 CSS 要轉場。
    • property:屬性值可以是要轉場的 CSS 屬性名稱,以逗號區隔,屬性名稱例如 widthheight

transition-timing-function 屬性們的效果

  • ease : 緩慢開始 → 中間變快 → 慢慢結束。
  • linear:從開始到結束的速度一致。
  • ease-in:緩慢開始。
  • ease-out:緩慢結束。
  • ease-in-out:緩慢開始和緩慢的結束。
  • steps(int,start|end):逐格動畫,沒有過度效果,而是一幀一幀的變化,所以指定格數越多動畫看起來會越滑順。
    • 第一個參數 int 為指定間格數。
    • 第二個參數有 start|end 可選,若選 start 表示開始值不動。
  • cubic-bezier(n, n, n, n):為二次貝茲曲線,利用兩個控制點決定一個曲線,可搭配 cubic-bezier.com 來使用。
    • n 值可填 0 ~ 1 之間的數字。

詳細動畫效果可參考此篇文章 CSS transition 各種速率

實作 1. Transition 轉場效果,hover 時物件寬度變大

CodePen 範例

實作 1. Transition 轉場效果使用 transition-property

CodePen 範例

  • 範例中使用 transition-property: width; ,明確指定只有寬度要轉場效果,可見滑鼠滑入時高度是沒有轉場效果的。

❒ Transform

  • 可控制元素的旋轉、縮放、移動 等,但不適用「 行內元素 」。
  • transition 可於 animation 中被當屬性運用。

Transform 屬性

  • translate 移動:
    • 單位:百分比或尺寸值 ( px 等 )
    • 屬性值:translate(X軸, Y軸) | translateX() | translateY() | translateZ() | translate3d()
    • translateX()、 translateY() 可縮寫為 translate(X軸, Y軸)
  • scale 縮放:
    • 單位:須為倍數
    • 屬性值:scaleX() | scaleY() | scaleZ() | scale3d()
    • X 軸與 Y 軸會以同倍率縮放。
    • CodePen 範例
  • rotate 旋轉:
    • 單位:deg
    • 屬性值:rotateX() | rotateY() | rotateZ() | rotate3d()
  • skew 傾斜:
    • 單位:deg
    • 屬性值:skew(X軸, Y軸)

❒ Animation 效果的套件

1. Animate.css 套件

2. AOS 套件

❒ 動畫效果建議使用會佔據空間的屬性

opacitytransformdisplayvisibility 屬性為例。

會佔據空間的屬性

  1. opacity
  2. transform
  3. visibility

不會佔據空間的屬性

  1. display

為什麼建議使用會佔據空間的屬性?

如果要做動畫效果會建議使用會佔據空間的屬性,這樣當某元素執行動畫效果時,不會影響其他元素的位置變得大家都在動,使用者體驗會比較好。

Codepen 範例

參考資訊