Day8 | Animation、Transition、Transform 動畫效果

發表於 分類於
animation、transition、transform

❒ Animation 、 Transition、Transform 差異

Animation

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

Transform

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

Transition

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

❒ Animation 動畫

▷ Animation 結構

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

  • from 與 to ：只能定義頭語尾的影格變化。
  • % ：可以定義更多階段的影格變化。
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 擁有 forward 與 backwards 兩者功能，依據開始或結束決定呈現的狀態。
  • 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 使用 from 與 to 讓物件移至右方再回來原點

CodePen 範例

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

CodePen 範例

❒ Transition 轉場效果

▷ transition 屬性

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

▷ 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 套件

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

以 opacity、transform、display、visibility 屬性為例。

▷ 會佔據空間的屬性

  1. opacity
  2. transform
  3. visibility

▷ 不會佔據空間的屬性

  1. display

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

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

Codepen 範例

❒ 參考資訊