如何在CSS或Javascript中高效地创建按时间顺序排列的动画时间轴？

Question

我目前正在做一个新的项目，刚刚开始深入研究CSS动画。我的问题是:如何创建动画队列的时间线？也就是说，如何让一个动画在另一个动画结束后高效地运行？

我正在尝试实现的一个示例：https://www.v2.aristidebenoist.com/

Answer 1

在我看来，Greensock.js是最好的选择。你可以用细粒度的细节来编写脚本，它有大量有用的插件和内置的工具来满足常见的动画需求：

https://greensock.com/timelinelite

Answer 2

查看CSS关键帧：https://css-tricks.com/snippets/css/keyframe-animation-syntax/和https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations

您可以创建一系列不同的关键帧集，然后通过使用javascript更新根上包含元素的类来触发不同的关键帧集。

在MDN链接上，进一步向下查看动画事件文档。你可以通过它们来了解动画什么时候开始/迭代/结束。

Answer 3

这是通过animation-timeline属性在CSS Animations 2中解决的：

animation-timeline: auto | none | <timeline-name>

此属性为用户提供了对同步/取消同步CSS动画的更大控制。

目前(2021年6月)，任何浏览器都不支持此属性，但CSS实现有时确实很快！