Skip to content

Instantly share code, notes, and snippets.

@jasonkmccoy
Last active August 29, 2015 14:16
Show Gist options
  • Save jasonkmccoy/1eba248ae6cbd8ad069c to your computer and use it in GitHub Desktop.
Save jasonkmccoy/1eba248ae6cbd8ad069c to your computer and use it in GitHub Desktop.
@mixin keyframes($animation-name) {
@-webkit-keyframes $animation-name {
@content;
}
@-moz-keyframes $animation-name {
@content;
}
@-ms-keyframes $animation-name {
@content;
}
@-o-keyframes $animation-name {
@content;
}
@keyframes $animation-name {
@content;
}
}
@mixin animation($str) {
-webkit-animation: #{$str};
-moz-animation: #{$str};
-ms-animation: #{$str};
-o-animation: #{$str};
animation: #{$str};
}
@include keyframes(slide-down) {
0% { opacity: 1; }
90% { opacity: 0; }
}
.element {
width: 100px;
height: 100px;
background: black;
@include animation('slide-down 5s 3');
}
@jasonkmccoy
Copy link
Author

Animations are always a pain to create with all the vendor prefixes and what not. But with the help of this mixin it will boil down to just a few lines of code.

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