Sass snippet for when you need to do the same keyframe animation for different elements but use different colors.

sass_keyframe_color_mixin.scss

// Setup a map for the color variables.

$colorMap: (firstBlue: #297189, secondBlue: #BEEBEB, thirdBlue: #A2DAE0, fourthBlue: #81C4D4, fifthBlue: #5099AA);

// Loop through each to create the selector and keyframes function

@each $colorName, $color in $colorMap {

  // Selector for this specific svg component.

  .logo_transition.fill_#{$colorName} {
    animation: fill_#{$colorName} 1s 1s linear forwards;
  }

  // Keyframes

  @keyframes fill_#{$colorName} {
    to {
      fill: $color;
    }
  }

}