CSS 动画覆盖 Greensock 补间

Question

我有一个 GSAP TweenMax 时间轴，我在其中选择 ID 为#plane 的 SVG 多边形并使用时间轴对其进行动画处理。但是，如果我输入 css '#plane{animation: fly-plane 2s 0s 20 alternate ease-in-out forwards;}' 然后 css 覆盖并完全关闭 GSAP 动画。这是正常的吗？我没有找到关于此的其他帖子，所以我猜不是？

var plane = document.querySelector("#plane"),
  tl = new TimelineMax({ repeat: -1 });

tl.to(plane, 1, { xPercent: 50, width: 200, autoAlpha: 0.5 });

@keyframes fly-plane {
  0% {
    transform: translateX(0px);
  }
  50% {
    transform: translateX(50px);
  }
  100% {
    transform: translateX(100px);
  }
}

#plane {
  animation: fly-plane 2s 0s 20 alternate ease-in-out forwards;
}

它与类顺便说一句

具有相同的行为

Answer 1

是的，这听起来很正常 - 您告诉 CSS 在同一元素的相同属性（变换）上设置与 GSAP 完全不同的值。所以他们在争夺控制权。我对你期望发生的事情感到困惑。

不过，宽度和不透明度仍应由 GSAP 控制，因为您只是在与 "transform" 发生冲突:)

如果您需要更多帮助，最好的地方可能是 https://greensock.com/forums/

上的专门论坛

补间快乐！

CSS 动画覆盖 Greensock 补间

CSS animation overwriting Greensock tweens

javascript

css

sass

gsap