Question

我有一个GSAP TweenMax时间轴，其中我选择了ID为#plane的SVG多边形，并使用时间轴对其进行了动画处理。但是，如果我在css中输入了“ #plane {动画：飞行平面2s 0s 20交替的缓入转出；}”，那么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控制，因为您只会通过“ transform”进行战斗：）

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

上的专用论坛。

补间快乐！

CSS动画覆盖Greensock补间

1 个答案: