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;
}
}
@jaraburningman
Copy link

works for me
thank you for this gist

@pabagan
Copy link

pabagan commented Jun 10, 2013

Fantastic!! Thanks so much!!

@AntonNiklasson
Copy link

Thank you!

@funnythingz
Copy link

so good! thanks!

@SantzDesign
Copy link

Great thanks.

@timseverien
Copy link

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

@alkaithil
Copy link

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

@erikpantzar
Copy link

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.

@simonwalsh
Copy link

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

@kevinchevallier
Copy link

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?

@lambirou
Copy link

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

@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