可动画的 CSS 与 Transform

CSSPlugin 已内置。优先动画 transform 与 opacity，少动画 width/top/left，以免触发布局（reflow）。

Transform 快捷属性

GSAP 写法	对应	注意
`x` / `y` / `z`	translate	数字默认 px；字符串可写 `"50vw"`
`xPercent` / `yPercent`	百分比位移	相对自身宽高，居中常用 `xPercent: -50`
`scale` / `scaleX` / `scaleY`	缩放	`scale: 1` 是原大小
`rotation`	rotate (deg)	也可用 `rotation: "+=90"` 相对旋转
`rotationX` / `rotationY`	3D 旋转	父级要有 `perspective`
`skewX` / `skewY`	倾斜	过大易糊，点缀即可
`transformOrigin`	原点	`"center center"` / `"left top"`

GSAP 会把多次 transform 合成一条，避免自己拼接 transform: rotate() translate() 字符串。相对增量语法：x: "+=80"、rotation: "-=45"。

复合 Transform

gsap.to("#box7", {
  x: 320,
  y: 28,
  scale: 1.45,
  rotation: 180,
  skewX: 12,
  transformOrigin: "center center",
  duration: 1.8,
  ease: "elastic.out(1, 0.5)"
});

其他常用 CSS

属性	说明
`opacity` / `autoAlpha`	autoAlpha = opacity + visibility，opacity 到 0 时设 hidden，避免点到透明层
`backgroundColor`	颜色可插值；也可用 `"random([red, blue])"`
`borderRadius`	字符串 `"50%"` 或数字
`filter`	如 `filter: "blur(10px)"`，性能开销比 transform 大
`clipPath`	揭示动画利器，见案例「图片揭示」
`width` / `height`	能做，但会 reflow；能用 scale 就别拉宽高

autoAlpha + 颜色 + 圆角

CSS

gsap.to("#box8", {
  autoAlpha: 0.55,          // 半透明但仍可见
  width: 108,
  height: 108,
  borderRadius: "50%",
  backgroundColor: "#8b5cf6",
  duration: 1.4,
  ease: "power2.out"
});

相对值与函数型属性

函数会按目标下标调用，适合给列表里每个元素不同终点。

gsap.to("#fnStage .box", {
  y: (i) => 20 + i * 18,   // 第 0 个 20px，第 1 个 38px…
  rotation: "+=15",
  duration: 0.8,
  stagger: 0.08
});