CSS 动画覆盖 Greensock 补间答案

【问题标题】：CSS animation overwriting Greensock tweensCSS 动画覆盖 Greensock 补间
【发布时间】：2019-04-22 14:04:01
【问题描述】：

我有一个 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;
}

顺便说一句，它与类具有相同的行为

【问题讨论】：

标签： javascript css sass gsap

【解决方案1】：

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

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

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

补间快乐！

【讨论】：