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;
  } 
}

Hey there-- thanks for this. Do you by any chance know what version of SASS you were using? I get the old Illegal nesting: Nothing may be nested beneath mixin directives. Anyway, no biggie. Cheers!

This gist is old. You can do better at this point. I recommend https://github.com/ericam/compass-animation

But you're right. It requires Compass 0.12 and Sass 3.2.0.alpha.95

i'm getting an error from the {$name} part of it and am writing in sass. can you help?

works for me
thank you for this gist

Fantastic!! Thanks so much!!

Thank you!

so good! thanks!

Great thanks.

According to MDN, there's no -ms- prefix, but there is an -o- prefix!
https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes

very helpful for an old project with no compass on it, thanks!

EEeeeh, anyone know how to implement this into a grunt build with compass?

I'm looking for a way to implement compass, and use this keyframe mixin then a animate mixin. Stuck at the animate part.

@alkaithil Is there such equivalent in Compass ? Can't find it...

I've tried to use it like this:

@each $engine in -webkit, -moz, -o {
    @#{$engine}-keyframes imageAnimation {
        0%  {   opacity: 0; #{$engine}-animation-timing-function: ease-in; }
        16% {   opacity: 1; #{$engine}-transform: scale(1.05); }
        34% {   opacity: 1; #{$engine}-transform: scale(1.1); }
        44% {   opacity: 0; #{$engine}-transform: scale(1.1) translateY(-20%); }
        50% {   opacity: 0; #{$engine}-transform: scale(1.1) translateY(-100%); }
        100% {  opacity: 0 }
    }
}

So that i could get this whole block done for all engines listed (webkit, moz & o) but the @ right before #{$engine}-keyframes imageAnimation gives me an error on compilation. Has anyone tested this?

un big merci pour ce gist très util pour plusieurs de mes projets
thank!

Thanks for the SCSS version! Definitely helped alot!

Thanks for this painkiller ☺️

Thank you!

Thanks for the SCSS version. Saved me a lot of time.

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.