A Keyframes Mixin (Sass only)

keyframes-sass-output.css

@-webkit-keyframes bgcolor { 0% { background-color: #ffccf2; }
  50% { background-color: #ccffcc; }
  100% { background-color: #ccffff; } }

@-moz-keyframes bgcolor { 0% { background-color: #ffccf2; }
  50% { background-color: #ccffcc; }
  100% { background-color: #ccffff; } }

@-ms-keyframes bgcolor { 0% { background-color: #ffccf2; }
  50% { background-color: #ccffcc; }
  100% { background-color: #ccffff; } }

@keyframes bgcolor { 0% { background-color: #ffccf2; }
  50% { background-color: #ccffcc; }
  100% { background-color: #ccffff; } }

keyframes-scss-output.css

/*
Syntax error: Invalid CSS after "...bkit-keyframes ": expected "}", was "#{$name} {"

keyframes.sass

// keyframes mixin
=keyframes($name)
  @-webkit-keyframes #{$name}
    @content
  @-moz-keyframes #{$name}
    @content
  @-ms-keyframes #{$name}
    @content
  @keyframes #{$name}
    @content

// use of keyframes mixin
+keyframes(bgcolor)
  0%
    background-color: #ffccf2
  50%
    background-color: #ccffcc
  100%
    background-color: #ccffff

keyframes.scss

// keyframes mixin
@mixin keyframes($name) {
  @-webkit-keyframes #{$name} {
    @content; 
  }
  @-moz-keyframes #{$name} {
    @content;
  }
  @-ms-keyframes #{$name} {
    @content;
  }
  @keyframes #{$name} {
    @content;
  } 
}

// use of keyframes mixin
@include keyframes(bgcolor) {
  0% {
    background-color: #ffccf2;
  }
  50% {
    background-color: #ccffcc;
  }
  100% {
    background-color: #ccffff;
  } 
}

Careful if you have any transform attributes in your animation, they need to be -webkit-transform in the webkit version.

I've gone for the following (need separate ones hardcoded for the number of steps in your animation):

@mixin keyframes-transform-3($name, $transform1, $transform2, $transform3) {
    @-webkit-keyframes #{$name} {
        0% { -webkit-transform: $transform1; }
        50% { -webkit-transform: $transform2; }
        100% { -webkit-transform: $transform3; }
    }
    @keyframes #{$name} {
        0% { transform: $transform1; }
        50% { transform: $transform2; }
        100% { transform: $transform3; }
    }
}

Thank you

Thanks 🍺

Thanks! Very helpful!

Thanks for your insightful code!
I needed a same default animation with a dynamic color (depending of a status).
Here is my adaptation of your scss schema:

@mixin animateBox($name, $color) { animation: #{$name} 1s infinite; @keyframes #{$name} { 50% { border-color: $color; } } }

Using:
.is-open{ @include animateBox(open, var(--color)); }

Thank you @meninomiel I needed that.