SVG 动画结合 @keyframes答案

【问题标题】：SVG animation combine @keyframesSVG 动画结合 @keyframes
【发布时间】：2016-11-25 22:21:18
【问题描述】：

我正在创建路由器的 SVG 动画。
这不是很令人兴奋，但我有以下问题。

路由器的每一面都有不同的颜色。每一方都有自己的班级。
目前我的颜色填充看起来像这样：

@keyframes router_base 
{   
    0% {
        fill: #85d1d3;
    }   
    50% {
        fill: #85d1d3;  
        stroke-dashoffset: 0;
    }   
    100% {
        fill: black;
        stroke-dashoffset: 0;
    } 
 }

这告诉router_base 50% 的给定时间它保持#85d1d3，最后 50% 变为黑色。

每一面都有自己的颜色，所以在这个例子中，我应该为每种颜色创建一个@keyframe。
这看起来可以做得更聪明......

这是整个事情的一部分。 https://jsfiddle.net/yzzubxgf/

【问题讨论】：

我不确定这是否可以通过一个可重复使用的动画来完成，但可以通过两个可重复使用的动画来完成，例如 here。让我知道它是否有帮助，如果有帮助，我将作为答案发布。
不，问题仍然存在。这个想法是首先绘制所有线条，然后填充颜色。因为每一面都有自己的颜色，所以我认为可以在一个@keyframe 中为每种颜色做到这一点
需要不止一个动画只是因为你说每一面都有自己的颜色。在填充过渡之前绘制线条是一件简单的事情。它只需要像here 一样调整延迟。（我更改了笔触颜色以使其更明显。）
是的，我知道，但这并不能解决我的“问题”总计，所以需要大量编码:-)
如果您必须为每种颜色创建一个关键帧，则需要 4/5 个关键帧，但使用这种方法，您始终只需要 2 个关键帧。无论如何，这是你的选择。

标签： css animation svg

【解决方案1】：

如果使用 sass，您可以创建一个 mixin，它将为不同的动画生成代码，如下所示：

@mixin createKeyFrames($animationName, $color1, $color2 : black) {
  @keyframes #{$animationName}
  {   
      0% {
          fill: $color1;
      }   
      50% {
          fill: $color1;  
          stroke-dashoffset: 0;
      }   
      100% {
          fill: $color2;
          stroke-dashoffset: 0;
      } 
   }
}

然后调用它

@include createKeyFrames(router_base, #85d1d3);

【讨论】：