当需求中出现“可见时”时，你的大脑应该立即想到 IntersectionObserver。 正如 Zach 在这里所做的那样，在元素滚动到视图中时启动动画。
不过，这个动画是一个 SVG SMIL 动画：一个 <animate> 的情况。 SMIL 动画有一些很酷的功能，比如可以在另一个动画结束时开始，这是 CSS 不太容易实现的。 事实证明，SMIL 也有 JavaScript API，因此可以按需启动动画，同时尊重 prefers-reduced-motion。
另请查看此内容
.querySelectorAll(`:scope [begin="indefinite"]`);那个 :scope 东西 对我来说是新的。
SMIL 现在不再消亡了吗？ 根据 这篇文章，2015 年，SMIL 正在消亡，因为 WebKit 中的支持正在减少，并且当时 IE/Edge 根本不会提供太多支持。 情况现在还是这样吗？ 显然，Edge 从那时起发生了很多变化。
有一段时间情况甚至更糟，因为 Chrome 暗示要彻底移除它。 但我认为现在情况有所好转（尽管我没有任何证据可以引用），而且现在 Edge 由于 Chromium 的缘故也支持它，所以也许它会一直存在。