Animation 如何将动画复制到SVG的所有路径

我想制作SVG的动画并延迟到任何元素。 请看这个和狮子。

---

这个动画很简单，但是延迟到任何路径都非常耗时。

重新创建这个效果非常简单

我没有检查那个网站是如何做到的，但我会这样做

首先，我们需要一个SVG，其中所有路径都在一个组中（

）

然后，对于动画，我们一个接一个地（延迟地）循环所有

元素，添加一个类，该类使用

变换将路径移回到屏幕上

.onto-screen-anim
{
  transition: transform 1s ease-out;
  transform: translateX(100px);  /* 100 = width of viewBox */
}

过渡会使路径平滑地滑入


工作演示


var group=document.getElementById（“anim”）；
//在我们的SVG中生成许多测试路径。
//这只是为了演示，作为在我们的代码片段中使用大型SVG的替代方案。
对于（var i=0；iThanks men）。我输入了javascript代码，但错误为：uncaughttypeerror:无法读取null的属性“appendChild”，可能是因为SVG没有id为“anim”的
。我在这里放的是一个演示。你需要根据自己的情况调整它。你的SVG在哪里？狮子图像是属于你的吗？我不会帮你窃取别人为你自己的网站提供的图形。不，我使用SVG，因为它很容易学习，并且有很多路径标记，我只想学习这个方法。如果我要窃取我使用了另一个SVG！！！不管怎样，如果你不想帮忙，没问题。谢谢你的帮助：）@Mitch你在屏幕上已经有一个SVG是因为你的初始SVG已经有了所有的路径。摆脱他们。
group.setAttribute("transform", "translate(-100, 0)");

.onto-screen-anim
{
  transition: transform 1s ease-out;
  transform: translateX(100px);  /* 100 = width of viewBox */
}