CSS动画覆盖Greensock补间动画

Question

我有一个GSAP TweenMax时间轴，我在其中选择id为#plane的SVG多边形并使用时间轴为其设置动画。但是，如果我放入css'＃plane {animation：fly-plane 2s 0s 20 alternate ease-in-out forward;}'那么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;
}

它与btw类具有相同的行为

Answer 1

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

宽度和不透明度仍然应该由GSAP控制，因为你只是在与“变换”进行斗争:)

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

快乐的补间！