CSS

GSAP 几乎可以动画处理所有与 CSS 相关的属性DOM 元素的属性。常用的动画属性包括变换、透明度和颜色。但 GSAP 可以处理你给它的一切内容。没有官方列表，因为它太长了，但是如果不确定 - 请尝试一下！

CSS 属性​

GSAP 可以动画处理任何可被动画处理的 CSS 属性，甚至很多不被官方认可的 CSS 动画属性。

// some example properties.
gsap.to(element, {
  backgroundColor: "red", // background-color
  fontSize: 12, // font-size
  boxShadow: "0px 0px 20px 20px red", // animate complex strings
  borderRadius: "50% 50%",
  height: "auto", // animate between auto and a px value 🪄
});

非可动画属性...​

如果你定义了一个不可动画处理的属性 — 比如position: "absolute"或者borderStyle: "solid"，GSAP 会立即为你应用该属性。这些不可插值的属性将在补间动画开始时设置（除了display: "none"这些属性会在补间动画结束时应用，原因显而易见）。

转换​

GSAP 提供了一组内置的变换别名，它们跨浏览器兼容性更好，性能更优，并且比直接对 transform 字符串执行动画更为可靠。

gsap.to(element, {
  // writing out the transform string 🔥
  // transform: "translate(-50%,-50%)"
  xPercent: -50,
  yPercent: -50,
});

在常规 CSS 中，transform 的排列顺序会影响结果，但为了保证一致性，GSAP 总是以相同的顺序来执行：平移 (x, y, z)，然后是scale状态设置，rotationX状态设置，rotationY状态设置，skew状态设置，rotation（与rotationZ）。

快速参考​

以下是一份常用变换及其它常用于动画的属性列表。

复杂字符串​

GSAP 可以动画处理像boxShadow: "0px 0px 20px 20px red", borderRadius: "50% 50%"，以及border: "5px solid rgb(0,255,0)"这样的复杂值。在必要时，它会尝试判断该属性是否需要供应商前缀，并相应地应用。

单位​

GSAP 对单位有合理的默认值。如果你想设置 x 属性，你可以这样说x: 24而不是x: "24px"，因为GSAP使用像素作为x的默认单位。如果你想指定特定的单位，可以在值的末尾附加单位并将值包裹在字符串中。

gsap.to(HTMLelement, {
  rotation: 360 // default deg
  rotation: "1.25rad" // use radians instead
  x: 24 // using px
  x: "20vw" // use viewport widths instead
});

3D 变换​

你可以像这样动画化3D属性：rotationX, rotationY, rotationZ（与常规版本相同）rotation)，z, perspective，以及transformPerspective在所有现代浏览器中（参见Can I Use了解浏览器对3D变换的支持详情）。你可以直观地一起动画化3D变换属性和2D属性：

gsap.to(element, {
  duration: 2,
  rotationX: 45,
  scaleX: 0.8,
  z: -300,
});

这个transformPerspective这类似于在CSSperspective()样式内部直接添加transform的样式，如：transform: perspective(500px) rotateX(45deg)它仅对该特定元素生效。常见的取值范围大约是200到1000，数值越小透视失真效果越强。如果你想让一组元素共享同一个透视角度（相同的消失点），你应该在这些元素的父级/容器上设置普通的perspective 属性perspective属性。

//apply a perspective to the PARENT element (the container) to make the perspective apply to all child elements (typically best)
gsap.set(container, { perspective: 500 });

//or apply perspective to a single element using "transformPerspective"
gsap.set(element, { transformPerspective: 500 });

//sample css:
.myClass {
    transform: translate3d(10px, 0px, -200px) rotateY(45deg) scale(1.5, 1.5);
}

//corresponding GSAP transform (animated over 2 seconds):
gsap.to(element, {
    duration: 2,
    scale: 1.5,
    rotationY: 45,
    x: 10,
    y: 0,
    z: -200
});

//sample CSS that uses a perspective():
.myClass {
    transform: perspective(500px) translateY(50px) rotate(120deg);
}

//corresponding GSAP transform (set, not animated):
gsap.set(element, {
    transformPerspective: 500,
    rotation: 120,
    y: 50
});

关于透视的更多信息，请参阅这篇文章.

force3D​

force3D默认为"auto"auto模式，这意味着变换会自动优化速度，通过使用translate3d()而不是translate()。这通常会导致浏览器将该元素放置在其自己的合成层上，使动画更新更高效。在"auto"normal模式下，当补间完成后（如果不再需要3D），GSAP会自动切换回2D以释放更多的GPU内存。如果你希望保持在3D模式，可以设置force3D: true。或者，如果你想尽可能保持在2D模式，可以设置force3D: false。详情请参见“打破CSS动画与JavaScript对比的误区”了解性能方面的更多细节。

transformOrigin（变换原点）​

设置所有变换（2D和/或3D）发生的原点。默认情况下，它位于元素的中心（"50% 50%"center）。"top", "left", "right"，或者"bottom"来定义这个值，也可以使用百分比（右下角将是"100% 100%"100% 100%）或像素。比如，如果你希望一个对象围绕其左上角旋转，可以这样做：

//spins around the element's top left corner
gsap.to(element, {
  duration: 2,
  rotation: 360,
  transformOrigin: "left top",
});

引号中的第一个值对应x轴，第二个值对应y轴，所以如果你想让对象围绕距其左侧边缘50px、顶部边缘20px的位置变换，你可以这样做：

//spins/scales around a point offset from the top left by 50px, 20px
gsap.to(element, {
  duration: 2,
  rotation: 270,
  scale: 0.5,
  transformOrigin: "50px 20px",
});

这甚至适用于SVG元素！

你可以将transformOrigin定义为3D值通过添加第三个数字，例如想围绕距离偏移400px的点绕y轴旋转，你可以这样做：

//rotates around a point that is 400px back in 3D space, creating an interesting effect:
gsap.to(element, {
  duration: 2,
  rotationY: 360,
  transformOrigin: "50% 50% -400px",
});

SVG​

svgOrigin（SVG原点）​

仅用于SVG元素其工作方式与transformOrigintransformOrigin完全一样，但它使用的是SVG全局坐标空间而非元素的本地坐标空间。举例来说，如果你想让多个SVG元素围绕一个共同的点旋转，这可能会非常有用。你可以定义svgOriginsvgOrigintransformOrigin或者transformOrigin，不能同时定义两者（原因显而易见）。你可以这样做gsap.to(svgElement, {duration: 1, rotation: 270, svgOrigin: "250 100"})如果你想让svgElementSVG元素的原点像是在SVG画布全局坐标的x:250, y:100位置。单位不是必需的。它还会将值记录在data-svg-origintransform属性中以便可以解析回来。svgOriginsvgOrigin不支持基于百分比的值。

smoothOrigin（平滑原点）​

仅用于SVG元素当更改SVG元素的transformOrigintransformOrigin（或svgOriginsvgOrigin）时，CSSPlugin现在会自动记录/应用一些偏移量，以确保元素不会“跳跃”。你可以通过设置CSSPlugin.defaultSmoothOrigin = falsesmoothOrigin: false来禁用此功能，也可以使用smoothOrigin: true或者smoothOrigin: false.

directionalRotation（定向旋转）​

以特定方向对 CSS 属性进行旋转补间动画，该方向可以是clockwise ("_cw"后缀），counter-clockwise ("_ccw"后缀），或shortest direction ("_short"后缀），在这种情况下，插件会根据最短路径自动选择方向。例如，如果一个元素当前的旋转角度为 170 度，你想要将其补间到 -170 度，普通的旋转补间动画会在逆时针方向总共移动 340 度，但如果你使用带有 _short 后缀的设置，它将改为顺时针方向移动 20 度。示例：

gsap.to(element, {
  duration: 2,
  rotation: "-170_short",
});

//or even use it on 3D rotations and use relative prefixes:
gsap.to(element, {
  duration: 2,
  rotation: "-170_short",
  rotationX: "-=30_cw",
  rotationY: "1.5rad_ccw",
});

注意值用引号括起，因此是一个字符串，其中包含表示方向的特定后缀 (_cw, _ccw，或者_short)。你也可以使用"+="或者"-="前缀来表示相对值。所有旋转属性都支持定向旋转后缀 (rotation, rotationX，以及rotationY)；你不需要使用directionalRotation作为属性名。还有一个DirectionalRotationPlugin（定向旋转插件）可用于对不是 DOM 元素的对象做动画，但如果你只是使用 CSSPlugin 对与 CSS 相关的属性做动画，则无需加载此插件，因为 CSSPlugin 已经内置了 DirectionalRotationPlugin 的功能。你可以点击此处查看交互式示例.

autoAlpha（自动透明度）​

与opacity与此类似，但是当值达到0垂直位置visibility会将属性设置为hidden以提升浏览器渲染性能并阻止目标上的点击/交互操作。当值不是0, visibility时，将会被设置为inherit。不会将其设置为visible是为了尊重继承关系（假设父级元素是隐藏的——显式将子级设置为可见会导致其显示出来，这可能并非你的本意）。为了方便起见，如果元素的visibility初始被设置为hidden和opacity设置为1，则会认为opacity也应从0开始。这样就很容易让你的页面初始状态为不可见（在 CSS 中设置你的visibility: hidden），然后在需要的时候淡入显示。

//fade out and set visibility:hidden
gsap.to(element, {
  duration: 2,
  autoAlpha: 0,
});

//in 2 seconds, fade back in with visibility:visible
gsap.to(element, { duration: 2, autoAlpha: 1, delay: 2 });

CSS 变量​

在支持它们的浏览器中，GSAP 可以对 CSS 变量进行动画处理。

clearProps（清除属性）​

你可以在clearProps that you want to clear from the element's style property when the tween completes (or use "all"或者true to clear all properties). This can be useful if, for example, you have a class (or some other selector) that should apply certain styles to an element when the tween is over that would otherwise get overridden by the element.style-specific data that was applied during the tween. Typically you do 有 need to include vendor prefixes. clearProps also clears the "transform" attribute of SVG elements that have been affected by GSAP because GSAP always applies transforms (like x, y, rotation, scale, etc.) via the transform attribute to avoid browser bugs/quirks. Clearing any transform-related property (like x, y, scale, rotation, etc.) will clear the 整个 transform because those are all merged into one "transform" CSS property.

//tweens 3 properties and then clears only "left" and "transform" (because "scale" affects the "transform" css property. CSSPlugin automatically applies the vendor prefix if necessary too)
gsap.from(element, {
  duration: 5,
  scale: 0,
  left: 200,
  backgroundColor: "red",
  clearProps: "scale,left", // note: "scale" (or any transform-related property) clears all transforms
});

autoRound（自动四舍五入）​

默认情况下，CSSPlugin 在补间过程中（即过渡中的值）会对像素值和zIndex四舍五入到最近的整数，因为它能提高浏览器性能，但如果你更希望禁用这种行为，可以在 CSS 对象中传入autoRound: false。你仍然可以使用SnapPlugin手动定义你希望四舍五入的属性。

如果你需要对数值属性（而不是与 CSS 相关的属性）做动画，你可以使用AttrPlugin（属性插件）。要替换 DOM 元素中的文本，请使用TextPlugin（文本插件）.

尝试一下你学到的内容！​

常见问题​