SVGアニメーションを組み合わせる@keyframes

Question

私はルータのSVGアニメーションを作成しています。
これはあまりエキサイティングではありませんが、次の質問があります。

ルーターは、各側面ごとに異なる色をしています。すべての側には自分のクラスがあります。
は、現在、私の色-充填は次のようになります。

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

これは、与えられた時間の50％が、それは#85d1d3のまま、最後の50％は、それが黒になっていることrouter_baseを伝えます。

いずれの側にも独自の色があります。この例では、すべての色に対して@keyframeを作成する必要があります。
これはよりスマートに実行できるように見えます。

ここではすべてのもののフィドルです。 https://jsfiddle.net/yzzubxgf/

Answer 1

SASSを使用すると、次のようなさまざまなアニメーション用のコードが生成されますミックスインを作成することができれば：

@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);