資料出處：(5)前端好好玩用 GSAP 做一個特效 – 動畫屬性
GSAP 的動畫屬性兩大類：
- CSS 屬性
- 自訂屬性
本篇只說明 CSS 屬性，下篇另說明自訂屬性。
GSAP 的 CSS 屬性
GSAP 的 x 縮寫，等於 CSS 的 transform: translateX()
1 | gsap.to('.box', { x: 100, duration: 3 }) |
GSAP 的 x 屬性，等於 CSS 的 transform: translateX(100px) 縮寫。
不用 x 縮寫，是可以直接用 transform: translateX(100px)，但程式碼會很長。
1 | gsap.to('.box', { transform: 'translateX(100px)', duration: 3 }) |
rotate: 360：旋轉 360 度
基本上 CSS 屬性都是可以被 GSAP 使用的，像是移動邊旋轉 360 度的動畫。
1 | gsap.to('.box', { x: 100, rotate: 360, duration: 3 }) |
scale: 2，放大二倍
邊移動邊縮放的動畫。
1 | gsap.to('.box', { x: 100, scale: 2, duration: 3 }) |
backgroundColor：以使用駝峰式縮寫，等同於 CSS 的 background-color 背景色
注意所使用的 CSS 屬性有 - 字號 (連字符)，使用駝峰式命名法。
GSAP 的 backgroundColor 為 CSS 的 background-color 的縮寫，遇到時使用駝峰式命名法。
1 | gsap.to('.box', { x: 100, backgroundColor: 'red', duration: 3 }) |
css: {}：GSAP 裡多一層專屬設定的 CSS 屬性，一般不用直接以縮寫方式饌寫
to() 方法的第一個物件中撰寫 CSS 動畫屬性，也可以使用 css: {} 物件來撰寫 CSS 動畫屬性。
這樣的方式比較麻煩會額外寫一個 css: {} 屬性，實戰上還是會使用直接縮寫的做法。
1 2 3 4 5 6 7 8 9 10 | gsap.to( '.box', { css: { x: 100, backgroundColor: 'red' }, duration: 3, } ) |
Comments are closed.