Skip to content

Instantly share code, notes, and snippets.

@mirisuzanne
Created January 13, 2012 17:37
Show Gist options
  • Save mirisuzanne/1607696 to your computer and use it in GitHub Desktop.
Save mirisuzanne/1607696 to your computer and use it in GitHub Desktop.
A Keyframes Mixin (Sass only)
@-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; } }
/*
Syntax error: Invalid CSS after "...bkit-keyframes ": expected "}", was "#{$name} {"
// 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 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;
}
}
@runbiscuit
Copy link

Thanks for the SCSS version! Definitely helped alot!

@abdurrahman
Copy link

Thanks for this painkiller ☺️

@vcostin
Copy link

vcostin commented Jul 22, 2015

Thank you!

@nisanthchunduru
Copy link

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

@eoghanmurray
Copy link

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

@dektaiimage
Copy link

Thank you

@live-wire
Copy link

Thanks 🍺

@faab-dev
Copy link

Thanks! Very helpful!

@meninomiel
Copy link

meninomiel commented Oct 30, 2020

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

@helphop
Copy link

helphop commented Mar 31, 2021

Thank you @meninomiel I needed that.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment