css - 多个 CSS 关键帧动画在 SVG 路径上有延迟

Question

我正在尝试使用 CSS3 关键帧来为 SVG 对象设置动画。 SVG 包含 13 条路径。首先，我希望每条路径都以 0.1 秒的延迟出现，然后保持可见(使用笔画)。当所有 13 条路径都出现时，我希望使用另一个关键帧同时填充它们，但是由于我已经在使用 animation-delay 来显示路径，所以我不确定如何在一次与另一个关键帧。

我现在有以下 CSS 代码。有没有其他方法可以实现我想要的？

path {
    stroke: #ccc;
    stroke-width: 5px;
    animation: appear .3s 1;
    /* animation: fill 1s 1; */
    animation-fill-mode: both;
}

path:nth-child(1), 
path:nth-child(2) { animation-delay: .1s }      
path:nth-child(3) { animation-delay: .2s }      
path:nth-child(4) { animation-delay: .3s }      
path:nth-child(5) { animation-delay: .4s }      
path:nth-child(6) { animation-delay: .5s }      
path:nth-child(7) { animation-delay: .6s }      
path:nth-child(8) { animation-delay: .7s }      
path:nth-child(9) { animation-delay: .8s }      
path:nth-child(10) { animation-delay: .9s }     
path:nth-child(11) { animation-delay: 1s }      
path:nth-child(12) { animation-delay: 1.1s }    
path:nth-child(13) { animation-delay: 1.2s }    

@keyframes appear { 
    from { opacity:0; } 
    to { opacity:1; } 
}

@keyframes fill {
    from { fill: none }
    to { fill: #ccc }
}

Answer 1

一种方法是将路径分组到 <g> 中元素并将填充动画应用于组:

g{fill:none;animation: fill 1s 1 .7s forwards; }

接下来是一个只有 7 条路径的工作示例。您可以对 13 条路径使用相同的逻辑。

path {
    stroke: #ccc;
    stroke-width: 5px;
    animation: appear .3s 1;
    animation-fill-mode: forwards;
}

path:nth-child(1), 
path:nth-child(2) { animation-delay: .1s }      
path:nth-child(3) { animation-delay: .2s }      
path:nth-child(4) { animation-delay: .3s }      
path:nth-child(5) { animation-delay: .4s }      
path:nth-child(6) { animation-delay: .5s }      
path:nth-child(7) { animation-delay: .6s }  

g{fill:none;animation: fill 1s 1 .7s forwards; }
  

@keyframes appear { 
    from { opacity:0; } 
    to { opacity:1; } 
}

@keyframes fill {
    from { fill: none; }
    to { fill: #f00; }
}

<svg viewBox="0 0 120 30">
  <g>
  <path d="M10,11h8v8h-8z"/>
  <path d="M25,11h8v8h-8z"/>
  <path d="M40,11h8v8h-8z"/>
  <path d="M55,11h8v8h-8z"/>
  <path d="M70,11h8v8h-8z"/>
  <path d="M85,11h8v8h-8z"/>
  <path d="M100,11h8v8h-8z"/>
  </g>
</svg>