Skip to content

Instantly share code, notes, and snippets.

Last active December 12, 2015 00:19
  • Star 3 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
Star You must be signed in to star a gist
What would you like to do?
A simple mixins to use CSS3 anmiations in SASS with all vendor prefixes and the possibility to set any specific animation property.
@mixin animation($value) {
-webkit-animation: unquote($value);
-moz-animation: unquote($value);
-o-animation: unquote($value);
animation: unquote($value);
@mixin animation-property($property, $value) {
-webkit-animation-#{$property}: unquote($value);
-moz-animation-#{$property}: unquote($value);
-o-animation-#{$property}: unquote($value);
animation-#{$property}: unquote($value);
@mixin keyframes($name) {
@-webkit-keyframes #{$name} { @content; }
@-moz-keyframes #{$name} { @content; }
@-o-keyframes #{$name} { @content; }
@keyframes #{$name} { @content; }
Copy link


A button that changes it's background color in an infinite loop, while the process it triggered is working:

button {
    &.working {
        @include animation('working-bg 0.5s');
        @include animation-property('iteration-count', 'infinite');
@include keyframes('working-bg') {
    from { background-color: rgba(#090, 0); }
    to { background-color: rgba(#090, 0.5); }

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