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

Question

Пожалуйста, помогите с реализацией 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;
}

<div class="ab-container">
  <div class="vfa-box1">
    <img src="https://svgshare.com/i/CLH.svg" width="80" height="11">
    <div class="vfa-subtitle-box">
      <span class="vfa-bold">Security</span>
    </div>
  </div>
  <div class="vfa-box2">
    <img src="https://svgshare.com/i/CLH.svg" width="80" height="11">
    <div class="vfa-subtitle-box">
      <span class="vfa-bold">Sales always</span>
    </div>
  </div>
  <div class="vfa-box3">
    <img src="https://svgshare.com/i/CLH.svg" width="80" height="11">
    <div class="vfa-subtitle-box">
      <span class="vfa-bold">Best quality</span>
    </div>
  </div>
</div>

Answer 1

Вот как я бы это сделал:

Я использую ваш путь в качестве пути отсечения: <clipPath id="clip">.Вместо изображений я использую элементы SVG, в которых я анимирую линию, изменяя значение атрибута 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;
}

<div class="ab-container">
    <div class="vfa-box1">
      <svg width="80px" height="11px" viewBox="34 60 80 11" >
        <line x1="34" x2="114" y1="65.5" y2="65.5" stroke-dashoffset="80" >
           <animate id="a"
           attributeName="stroke-dashoffset"
           from="80" to="0"
           dur="1s"
           fill="freeze"/>
        </line>
      </svg>
        <div class="vfa-subtitle-box">
            <span class="vfa-bold">Security</span>
        </div>
    </div>
    <div class="vfa-box2">
        <svg width="80px" height="11px" viewBox="34 60 80 11" >
         <line x1="34" x2="114" y1="65.5" y2="65.5" stroke-dashoffset="80" >
           <animate id="b"
           attributeName="stroke-dashoffset"
           from="80" to="0"
           dur="1s"
           begin="a.end"
           fill="freeze"/>
        </line>
        </svg>
        
        <div class="vfa-subtitle-box">
            <span class="vfa-bold">Sales always</span>
        </div>
    </div>
    <div class="vfa-box3">
        <svg width="80px" height="11px" viewBox="34 60 80 11" >
         <line x1="34" x2="114" y1="65.5" y2="65.5" stroke-dashoffset="80" >
           <animate id="c"
           attributeName="stroke-dashoffset"
           from="80" to="0"
           dur="1s"
           begin="b.end"
           fill="freeze"/>
        </line>
        </svg>
        <div class="vfa-subtitle-box">
            <span class="vfa-bold">Best quality</span>
        </div>
    </div>
</div>



<svg width="0" height="0" viewBox="34 60 80 11" >
    <!-- Generator: Sketch 53.2 (72643) - https://sketchapp.com -->
    <title>Fill 1</title>
    <desc>Created with Sketch.</desc>
    
   
    <clipPath id="clip">
                <path id="stroke" d="M110.183516,61.6759399 C110.184437,61.6531135 110.185359,61.6302871 110.186281,61.6074607 C111.047584,61.5393327 111.908888,61.4715559 112.798303,61.4009696 C112.626411,60.5058235 112.012116,60.1592134 110.977076,60.1434105 C108.751235,60.1089954 106.525394,60.0180409 104.299553,60.0071545 C93.2417758,59.954127 102.271871,61.0666506 43.7004474,60.0071545 C41.475067,59.9667693 39.2492257,60.1089954 37.0229235,60.1434105 C35.9878843,60.1592134 35.373589,60.5058235 35.2016969,61.4009696 C36.0911117,61.4715559 36.9524155,61.5393327 37.8137193,61.6074607 C37.814641,61.6302871 37.8155627,61.6531135 37.8164843,61.6759399 C37.035827,61.706141 36.2514829,61.7096528 35.4754339,61.7718108 C34.3431581,61.8620629 33.8984507,62.5026068 34.0191899,63.7928251 C34.1039838,64.6988576 34.470349,64.9481922 35.6966355,64.9450316 C37.0095593,64.941871 38.3220222,64.9443292 39.6354068,64.9443292 C39.6464669,65.0233437 39.6584487,65.102007 39.6699696,65.1810214 C38.5713349,65.3200869 37.4625617,65.4222789 36.3795955,65.6112113 C35.6851146,65.7320156 34.6297985,65.5360598 34.7012282,66.537612 C34.7735796,67.55883 35.6989397,68.5161341 36.764855,68.5572216 C37.4312249,68.5828574 38.1008206,68.5621381 38.768573,68.5621381 C38.7953015,68.662223 38.8215692,68.7626592 38.8482977,68.8630954 C38.2234032,69.1299887 37.5985086,69.3972331 36.8270679,69.7269868 C38.0980556,70.6182699 39.4911649,70.8897285 40.9538606,70.8647951 C94.5233627,69.9394479 77.945223,71.1046478 93.8003099,70.9922717 C98.2155864,70.9610171 102.630863,70.9216855 107.045679,70.8647951 C108.509296,70.8454804 109.902405,70.6182699 111.172932,69.7269868 C110.401491,69.3972331 109.776597,69.1299887 109.152163,68.8630954 C109.17797,68.7626592 109.204698,68.662223 109.231427,68.5621381 C109.899179,68.5621381 110.568775,68.5828574 111.234684,68.5572216 C112.301521,68.5161341 113.22596,67.55883 113.299233,66.537612 C113.370201,65.5360598 112.314885,65.7320156 111.620865,65.6112113 C110.537438,65.4222789 109.428204,65.3200869 108.33003,65.1810214 C108.342012,65.102007 108.353072,65.0233437 108.365054,64.9443292 C109.677517,64.9443292 110.990902,64.941871 112.303825,64.9450316 C113.529651,64.9481922 113.896477,64.6988576 113.98081,63.7928251 C114.101549,62.5026068 113.656842,61.8620629 112.524566,61.7718108 C111.748517,61.7096528 110.964173,61.706141 110.183516,61.6759399 Z" id="Fill-1"></path>
</clipPath>
</svg>

И так я бы сделал это с помощью CSS-анимации.Логика та же, что и раньше.Я использую путь, чтобы обрезать линии, и я анимирую смещение штрихов от 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;
  }
}

<div class="ab-container">
    <div class="vfa-box1">
      <svg width="80px" height="11px" viewBox="34 60 80 11" >
        <line x1="34" x2="114" y1="65.5" y2="65.5" stroke-dashoffset="80" >
        </line>
      </svg>
        <div class="vfa-subtitle-box">
            <span class="vfa-bold">Security</span>
        </div>
    </div>
    <div class="vfa-box2">
        <svg width="80px" height="11px" viewBox="34 60 80 11" >
         <line x1="34" x2="114" y1="65.5" y2="65.5" stroke-dashoffset="80" >
        </line>
        </svg>
        
        <div class="vfa-subtitle-box">
            <span class="vfa-bold">Sales always</span>
        </div>
    </div>
    <div class="vfa-box3">
        <svg width="80px" height="11px" viewBox="34 60 80 11" >
         <line x1="34" x2="114" y1="65.5" y2="65.5" stroke-dashoffset="80" >
        </line>
        </svg>
        <div class="vfa-subtitle-box">
            <span class="vfa-bold">Best quality</span>
        </div>
    </div>
</div>



<svg width="80px" height="11px" viewBox="34 60 80 11" >
    <!-- Generator: Sketch 53.2 (72643) - https://sketchapp.com -->
    <title>Fill 1</title>
    <desc>Created with Sketch.</desc>
    
   
    <clipPath id="clip">
                <path id="stroke" d="M110.183516,61.6759399 C110.184437,61.6531135 110.185359,61.6302871 110.186281,61.6074607 C111.047584,61.5393327 111.908888,61.4715559 112.798303,61.4009696 C112.626411,60.5058235 112.012116,60.1592134 110.977076,60.1434105 C108.751235,60.1089954 106.525394,60.0180409 104.299553,60.0071545 C93.2417758,59.954127 102.271871,61.0666506 43.7004474,60.0071545 C41.475067,59.9667693 39.2492257,60.1089954 37.0229235,60.1434105 C35.9878843,60.1592134 35.373589,60.5058235 35.2016969,61.4009696 C36.0911117,61.4715559 36.9524155,61.5393327 37.8137193,61.6074607 C37.814641,61.6302871 37.8155627,61.6531135 37.8164843,61.6759399 C37.035827,61.706141 36.2514829,61.7096528 35.4754339,61.7718108 C34.3431581,61.8620629 33.8984507,62.5026068 34.0191899,63.7928251 C34.1039838,64.6988576 34.470349,64.9481922 35.6966355,64.9450316 C37.0095593,64.941871 38.3220222,64.9443292 39.6354068,64.9443292 C39.6464669,65.0233437 39.6584487,65.102007 39.6699696,65.1810214 C38.5713349,65.3200869 37.4625617,65.4222789 36.3795955,65.6112113 C35.6851146,65.7320156 34.6297985,65.5360598 34.7012282,66.537612 C34.7735796,67.55883 35.6989397,68.5161341 36.764855,68.5572216 C37.4312249,68.5828574 38.1008206,68.5621381 38.768573,68.5621381 C38.7953015,68.662223 38.8215692,68.7626592 38.8482977,68.8630954 C38.2234032,69.1299887 37.5985086,69.3972331 36.8270679,69.7269868 C38.0980556,70.6182699 39.4911649,70.8897285 40.9538606,70.8647951 C94.5233627,69.9394479 77.945223,71.1046478 93.8003099,70.9922717 C98.2155864,70.9610171 102.630863,70.9216855 107.045679,70.8647951 C108.509296,70.8454804 109.902405,70.6182699 111.172932,69.7269868 C110.401491,69.3972331 109.776597,69.1299887 109.152163,68.8630954 C109.17797,68.7626592 109.204698,68.662223 109.231427,68.5621381 C109.899179,68.5621381 110.568775,68.5828574 111.234684,68.5572216 C112.301521,68.5161341 113.22596,67.55883 113.299233,66.537612 C113.370201,65.5360598 112.314885,65.7320156 111.620865,65.6112113 C110.537438,65.4222789 109.428204,65.3200869 108.33003,65.1810214 C108.342012,65.102007 108.353072,65.0233437 108.365054,64.9443292 C109.677517,64.9443292 110.990902,64.941871 112.303825,64.9450316 C113.529651,64.9481922 113.896477,64.6988576 113.98081,63.7928251 C114.101549,62.5026068 113.656842,61.8620629 112.524566,61.7718108 C111.748517,61.7096528 110.964173,61.706141 110.183516,61.6759399 Z" id="Fill-1"></path>
</clipPath>
</svg>