时间戳

首页 > 解决方案 > 在 SVG 路径上有延迟的多个 CSS 关键帧动画

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

问题描述

我正在尝试使用 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 }
}

标签： cssanimationsvg

解决方案

一种方法是将<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>

推荐阅读