GSAP动画结束后元素怎么恢复原状？

子硕提问于 2026-03-02 02:34:20 阅读 35

交互

我用GSAP做了一个按钮点击后的缩放动画，但动画结束后元素就保持在缩放状态了，没法自动变回原来的大小。明明没加repeat，也不该卡住啊？

试过在to里加onComplete回调手动重置，但感觉很麻烦。是不是有更简单的方式让动画结束后自动还原？比如像CSS animation-fill-mode那种效果？

现在的代码是这样的：

gsap.to('.btn', {
  scale: 1.2,
  duration: 0.3
})

我来解答赞 16 收藏

反馈

2 条解答

Mr.晨羲 Lv1

哈这个坑我踩过，当时也折腾了好久。其实GSAP默认就是这样的，动画完成会停在结束状态，不像CSS动画有fill-mode控制。

最简单的方法是加上yoyo: true，这样动画就会自动回放一次：

gsap.to('.btn', {

  scale: 1.2,

  duration: 0.3,

  yoyo: true

})

不过要注意这会让动画变成"去-回"的完整过程，总共耗时是duration的两倍。如果就想单次动画后立刻还原，可以这样：

gsap.to('.btn', {

  scale: 1.2,

  duration: 0.3,

  repeat: 1,

  yoyo: true

})

我之前傻傻地写了onComplete回调来手动设置scale:1，后来发现GSAP自带的yoyo特性真是香。不过要注意yoyo要和repeat配合使用，单独用yoyo是不会触发回放的。

2026-03-05 16:03

程序员奕森 Lv1

这个问题我刚开始学GSAP的时候也踩过坑，GSAP和CSS animation的默认行为确实不一样，理解了这个差异就好办了。

原理是这样：gsap.to() 方法会把你指定的属性值作为最终状态，动画结束后元素就停在那里。这其实是符合逻辑的设计，因为很多时候我们就是想要元素保持动画结束后的状态。但如果你想要"弹回去"的效果，就得明确告诉GSAP。

给你说几种常用的解决方案。

第一种，最简单直接的方式是用 yoyo 模式配合 repeat。yoyo的意思就是悠悠球，动画播放完会原路返回。代码改成这样：

gsap.to('.btn', {

  scale: 1.2,

  duration: 0.3,

  yoyo: true,    // 开启悠悠球模式，动画会反向播放

  repeat: 1      // 重复1次（总共播放2遍：正向+反向）

})

这样动画会先放大到1.2倍，然后自动缩回原来的大小。repeat: 1 表示重复一次，加上原始播放就是两遍，正好一去一回。

第二种，如果你想让元素在放大状态停留一会儿再缩回去，可以用时间线：

gsap.timeline()

  .to('.btn', {

    scale: 1.2,

    duration: 0.3

  })

  .to('.btn', {

    scale: 1,

    duration: 0.3

  }, '+=0.2')  // 在放大状态停留0.2秒后再缩回

})

时间线的好处是可以精确控制每个阶段的时长和缓动效果，复杂动画用它更方便。

第三种，用 gsap.fromTo() 方法，可以更明确地指定起始和结束状态：

gsap.fromTo('.btn', 

  { scale: 1 },           // 起始状态

  { 

    scale: 1.2,           // 结束状态

    duration: 0.3,

    yoyo: true,

    repeat: 1

  }

)

这种方式代码稍微多一点，但语义更清晰，适合需要精确控制起止状态的场景。

顺便说一句，你提到的CSS animation的 fill-mode 对应的是GSAP里的概念不太一样。CSS的 forwards 是让元素停在最后一帧，相当于GSAP的默认行为；CSS的 backwards 和 both 在GSAP里没有直接对应，因为GSAP的设计哲学是让开发者显式控制状态。

回到你的需求，第一种方案应该就能解决你的问题，代码改动最小，效果就是你想要的那种"弹一下就回去"的感觉。

2026-03-02 03:01