跳过主要内容

CSS

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

CSS 属性

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

带连字符的 CSS 属性

需要注意的是,带连字符的名称会变成驼峰式命名。因此,“font-size” 应该写成 “fontSize”,“background-color” 则应是 “backgroundColor”。

// 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"这些属性会在补间动画结束时应用,原因显而易见)。

什么是“不可动画处理的属性”?

要使一个属性可以动画处理,其起始值、结束值以及中间值都必须是有效的。如果你在rotation: 0rotation: 360之间进行动画,其中间存在有效的数值。根据这一逻辑,你不能在两个不同的背景图片之间进行动画,因为不存在有效的 CSS 来表示稍微一点这个图片再加一点点另一个图片。背景图片是一个二元属性,要么有图片,要么没有图片,不存在中间状态来实现动画。

动画布局

其他一些“不可能的属性”是布局属性。这些对于普通补间来说过于复杂——但可以通过魔法般地被 GSAP 的FLIP 插件

转换

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)。

参数对其进行逐次控制。

当你将 transform 定义为字符串时,例如"transform: translateX(50px)",GSAP 会将其应用于元素,然后读取并解析浏览器生成的matrix()或者matrix3d()。这个过程是必要的,因为字符串中可以包含任意数量或顺序的 transform 值,例如"translateX(50px) rotate(40deg) scale(0.5,0.5) translateY(100px) rotate(30deg)"。这种方法涉及大量额外的工作。此外,根据 CSS 规范,操作顺序是有影响的,这可能会导致那些不了解 CSS transform 的用户产生意外的结果。

当你使用像x:50而不是"transform: translateX(50px)"这样的简写方式定义属性时,GSAP 可以直接处理那个单一值,而不需要额外计算。简而言之,通过 GSAP 进行变换可以获得性能提升,更快的优化,以及直观且一致的操作顺序。

我们强烈建议使用 GSAP 内置的变换别名,除非你需要特定于非标准操作顺序的情况(这种情况很少见)。

快速参考

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

GSAP属性描述或等效 CSS
x: 100transform: translateX(100px)
y: 100transform: translateY(100px)
xPercent: 50transform: translateX(50%)
yPercent: 50transform: translateY(50%)
scale: 2transform: scale(2)
scaleX: 2transform: scaleX(2)
scaleY: 2transform: scaleY(2)
rotation: 90transform: rotate(90deg)
rotation: "1.25rad"使用弧度 - 没有对应的 CSS 替代方案
skew: 30transform: skew(30deg)
skewX: 30transform: skewX(30deg)
skewY: "1.23rad"使用弧度 - 没有对应的 CSS 替代方案
transformOrigin: "center 40%"transform-origin: center 40%
opacity: 0调整元素透明度
autoAlpha: 0opacity 和 visibility 的简写形式
duration: 1animation-duration: 1s
repeat: -1animation-iteration-count: infinite
repeat: 2animation-iteration-count: 2
delay: 2animation-delay: 2
yoyo: trueanimation-direction: alternate
关于变换的注意事项
  • 要使用基于百分比的平移,请使用xPercentyPercent而不是x或者y,通常是基于像素的。这样你可以结合 px 和百分比变换。
  • 你可以使用 scale 作为快捷方式来同时控制scaleXscaleY属性完全一样。
  • 你可以定义相对值,例如rotation: "+=30".
  • 你声明变换属性的顺序无关紧要。
  • GSAP与浏览器中元素的渲染质量无关。某些浏览器似乎能非常漂亮地渲染变换后的元素,而另一些则在抗锯齿处理方面表现较差。
  • 百分比形式的 x/y 平移也适用于 SVG 元素。

复杂字符串

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
});
信息

如果当前使用的测量单位不匹配,GSAP会自动为你进行转换。例如:将元素的宽度从"50%"补间到"200px"。

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,
});
警告

要让元素真正应用3D视觉透视效果,你必须设置父元素的perspective属性,或者设置该元素本身的特殊transformPerspectiveperspective属性

这个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
});

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

有关3D变换的注意事项
  • 在那些不支持3D变换的浏览器中,这些变换会被忽略。例如,rotationX可能无法工作,但rotation仍然有效。请参见can I use查看哪些浏览器版本支持3D变换的图表。
  • 所有的变换都会被缓存,因此你可以补间单个属性而不必担心它们丢失。每次补间时不需要定义所有的变换属性——只需定义你想动画化的属性即可。你可以随时使用方法读取任何变换相关值(或任何属性)。如果你希望清除这些值(包括作用于元素内联样式的变换),你可以使用clearProps: "transform"。如果你希望强制GSAP重新解析CSS中的变换数据(而不是使用之前补间记录的数据),你可以传入parseTransform: true提供给config对象中。
  • GSAP与浏览器中元素的渲染质量无关。某些浏览器似乎能非常漂亮地渲染变换后的元素,而另一些则在抗锯齿处理方面表现较差。
  • 想了解更多关于CSS 3D变换的信息,请参见这篇文章
  • Opera mini不支持3D变换

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

GSAP确实让transformOrigin在SVG元素上在各个浏览器中一致地工作。但请注意,根据规范,SVG元素并不正式支持3D变换。

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.

参数对其进行逐次控制。

根据浏览器中变换和变换原点的工作方式(以及官方规范中的规定),更改原点会导致元素产生突兀的跳动。例如,当transform-origintransformOrigin位于元素的左上角时旋转180度,最终位置会与围绕右下角旋转结果相差很大。由于GSAP专注于解决动画师遇到的实际问题(其中大多数人倾向于平滑地改变transformOrigintransformOrigin),因此smoothOriginGSAP 中的特性解决了这个问题。这也意味着如果你在像 Adobe Flash 这样的创作工具中创建 SVG 图形,而在这个工具中可能不容易/不明显地控制元素原点的位置,那么当你使用 GSAP 定义动画时,一切都会“自动正常工作”。transformOrigin通过 GSAP。目前,这个功能只适用于 SVG 元素,因为这是比较常见问题的地方。

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初始被设置为hiddenopacity设置为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(文本插件).


尝试一下你学到的内容!

动手试试

加载中...

常见问题

如何在我的项目中包含这些内容?

只需加载 GSAP 核心库即可,CSSPlugin 会自动包含在内!

在补间动画中我是否需要使用 css: 包装器?

不需要。这曾经是很早很早以前当 GSAP 刚推出时的要求,但由于对 DOM 元素进行动画处理的频率很高,GSAP 已经移除了对 CSS 属性动画必须使用该包装的需求。