Question

我有一个如下的svg动画，它重复3次，但是我想每次都用3种不同的颜色绘制动画。下面是小提琴。

小提琴-jsfiddle.net/6fyg1msL/4

Answer 1

那很简单。只需使用3个不同的关键帧，如下所示：

您的SVG：

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="612px" height="792px" viewBox="0 0 612 792" enable-background="new 0 0 612 792" xml:space="preserve">
<path class="path1" fill="none" stroke-width="1" stroke-dasharray="550" stroke-dashoffset="550" d="M240,260c0,6.627-5.373,12-12,12h-76c-6.627,0-12-5.373-12-12v-76
    c0-6.627,5.373-12,12-12h76c6.627,0,12,5.373,12,12V260z"/>
<path class="path2" fill="none" stroke-width="1" stroke-dasharray="550" stroke-dashoffset="550" d="M271,296c0,6.627-5.373,12-12,12h-76c-6.627,0-12-5.373-12-12v-76
    c0-6.627,5.373-12,12-12h76c6.627,0,12,5.373,12,12V296z"/>
<path class="path3" fill="none" stroke-width="1" stroke-dasharray="550" stroke-dashoffset="550" d="M306,346c0,6.627-5.373,12-12,12h-76c-6.627,0-12-5.373-12-12v-76
    c0-6.627,5.373-12,12-12h76c6.627,0,12,5.373,12,12V346z"/>
</svg>

这是您的CSS （只是路径和关键帧）

.path1 {
  animation: draw1 8.5s linear 3 forwards;  
}

 @keyframes draw1 {

  0%   
  {
    stroke: #b3s18c;

  }
    25%  {stroke:red;}
    50%  {stroke: blue;}
    75%  {stroke:green;}
    100% {stroke: Yellow;fill:none;stroke-dashoffset:100; }
}

.path2 {
  animation: draw2 8.5s linear 3 forwards;  
}

 @keyframes draw2 {

  0%   
  {
    stroke: #b3s18c;

  }
    25%  {stroke:green;}
    50%  {stroke: yellow;}
    75%  {stroke:red;}
    100% {stroke: blue;fill:none;stroke-dashoffset:100; }
}

.path3 {
  animation: draw3 8.5s linear 3 forwards;  
}

 @keyframes draw3 {

  0%   
  {
    stroke: #b3s18c;

  }
    25%  {stroke:blue;}
    50%  {stroke: green;}
    75%  {stroke:yellow;}
    100% {stroke: red;fill:none;stroke-dashoffset:100; }
}

如何在每个循环上重复使用不同颜色的svg动画？

1 个答案: