Skip to content

Instantly share code, notes, and snippets.

@2ndkauboy
Last active December 12, 2015 00:19
Show Gist options
  • Star 3 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save 2ndkauboy/4683007 to your computer and use it in GitHub Desktop.
Save 2ndkauboy/4683007 to your computer and use it in GitHub Desktop.
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; }
}
@2ndkauboy
Copy link
Author

Example:

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