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

Closed. This question needs to be more focused。它当前不接受答案。
                            
                        
                    
                
                            
                                
                
                        
                            
                        
                    
                        
                            想改善这个问题吗？更新问题，使其仅通过editing this post专注于一个问题。
                        
                        去年关闭。
                                                                                            
                
        
我有一个如下的svg动画，它重复3次，但是我想每次绘制3种不同的颜色。下面是小提琴。

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

最佳答案

那很简单。只需使用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; }
}

关于javascript - 如何在每个循环上重复使用不同颜色的svg动画？ ，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/51720840/