Множественная анимация ключевых кадров CSS с задержкой на путях SVG

Question

Я пытаюсь использовать ключевые кадры CSS3 для анимации объекта SVG. SVG содержит 13 путей. Сначала я хочу, чтобы каждый путь появлялся с задержкой в ​​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>