SVG анимация шаг за шагом

#css #html5 #svg #анимация #css_animation

Помогите с реализацией SVG анимации линий слева направо. 

Ниже, прикрепленный код и GIF

  



.ab-container {
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: space-between;
  max-width: 400px;
  height: 80px;
  border: 1px solid black;
  align-items: center;
  padding: 20px;
}

  

    
    

      Security
    
  
  

    
    

      Sales always
    
  
  

    
    

      Best quality
    
  




    

Ответы

Ответ 1

SVG решение

Я использую ваш путь в качестве clipping path: .
 Вместо изображений я использую элементы SVG, в которых я анимирую линию, изменяя
значение атрибута stroke-dashoffset с 80 (общая длина) до 0.
 Каждая анимация начинается после завершения  предыдущей анимации.   

Другими словами, - условие начала анимации  c id="b": begin="a.end", где a это id
первой анимации. 



.ab-container {
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: space-between;
  max-width: 400px;
  height: 80px;
  border: 1px solid black;
  align-items: center;
  padding: 20px;
}

line {
  stroke: #ffd328;
  clip-path: url(#clip);
  stroke-width: 11;
  stroke-dasharray: 80;
}

    

      
        

            Security
        
    
    

        
        
        

            Sales always
        
    
    

        
        

            Best quality
        
    







Ответ 2

CSS решение

И вот, как я бы сделал это с помощью CSS-анимации.
 Логика та же, что и раньше. Я использую путь, чтобы нарисовать линии, и для этого
анимируется начало отступа линии stroke-dashoffset от 80 до 0.



.ab-container {
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: space-between;
  max-width: 400px;
  height: 80px;
  border: 1px solid black;
  align-items: center;
  padding: 20px;
}

line {
  stroke: #ffd328;
  clip-path: url(#clip);
  stroke-width: 11;
  stroke-dasharray:80;
  stroke-dashoffset:80;
  animation:dash .5s forwards;
}

.vfa-box2 line{
  animation-delay:.5s
}
.vfa-box3 line{
  animation-delay:1s
}

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

    

      
        

            Security
        
    
    

        
        
        

            Sales always
        
    
    

        
        

            Best quality