如何设置SVG动画在页面加载完成后延迟n秒启动？

嘿，我来帮你搞定页面加载完成后延迟启动SVG动画的需求，这里有两种简单可行的方法，你可以根据自己的场景选择：

方法一：直接用CSS的animation-delay属性（最简单） #

这是最快捷的方式，只需要在你的动画属性里加上延迟时间就行，还能顺便修正一下你原来动画的小问题——原来的stroke-dashoffset设为0的话，动画一开始路径就是完整的，看不到绘制效果，应该把初始值设为和stroke-dasharray一样，然后动画到0，这样才有笔刷绘制的感觉。

修改后的CSS代码如下：

svg { 
  width: 700px; 
  display: block; 
  position: absolute; 
} 

svg path:nth-child(1) { 
  stroke-dasharray: 110.6; 
  stroke-dashoffset: 110.6; /* 初始隐藏整个路径 */
  animation: dash 3s linear 2s forwards; /* 2s就是你要的延迟时间，forwards保持动画结束状态 */
} 

svg path:nth-child(2) { 
  stroke-dasharray: 320.6; 
  stroke-dashoffset: 320.6; /* 初始隐藏整个路径 */
  animation: dash2 3s linear 2s forwards; 
} 

@keyframes dash {
  to {
    stroke-dashoffset: 0; /* 动画结束时显示完整路径 */
  }
}

@keyframes dash2 {
  to {
    stroke-dashoffset: 0;
  }
}

• animation-delay: 2s就是你要的延迟时间，把2s改成你需要的n秒就行，比如3s就是延迟3秒。
• forwards属性很重要，它会让动画结束后保持最后一帧的状态，不会重置回初始的隐藏状态。

方法二：用JavaScript控制（更灵活） #

如果你需要更精细的控制（比如要等页面所有资源都加载完成再触发，或者根据某些条件调整延迟），可以用JS来动态添加动画类：

第一步：把动画样式放到类里 #

svg { 
  width: 700px; 
  display: block; 
  position: absolute; 
} 

/* 初始状态隐藏路径 */
svg path:nth-child(1) {
  stroke-dasharray: 110.6;
  stroke-dashoffset: 110.6;
}

svg path:nth-child(2) {
  stroke-dasharray: 320.6;
  stroke-dashoffset: 320.6;
}

/* 动画类 */
.animate-path-1 {
  animation: dash 3s linear forwards;
}

.animate-path-2 {
  animation: dash2 3s linear forwards;
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes dash2 {
  to {
    stroke-dashoffset: 0;
  }
}

第二步：用JS监听页面加载并延迟添加类 #

// 等待页面所有资源（图片、SVG等）加载完成
window.addEventListener('load', function() {
  const delaySeconds = 2; // 这里设置你想要的延迟时间
  setTimeout(function() {
    // 给路径添加动画类，触发动画
    document.querySelector('svg path:nth-child(1)').classList.add('animate-path-1');
    document.querySelector('svg path:nth-child(2)').classList.add('animate-path-2');
  }, delaySeconds * 1000); // 把秒转换成毫秒，因为setTimeout用的是毫秒单位
});

这种方法的好处是，你可以根据业务逻辑调整延迟时机，比如等某个异步请求完成后再触发，或者动态修改延迟时间。

内容的提问来源于stack exchange，提问作者Adam Kerik