html - 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 动画的方式。道理和之前一样。我正在使用路径来剪裁线条，并将 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;
  }
}

<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>