Skip to content

Instantly share code, notes, and snippets.

@Integralist
Created October 22, 2012 14:10
Show Gist options
  • Save Integralist/3931680 to your computer and use it in GitHub Desktop.
Save Integralist/3931680 to your computer and use it in GitHub Desktop.
Sass Mixin for CSS3 Animations
@include keyframe(fadeout) {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@include keyframe(changecolour) {
0% {
color: #000;
}
100% {
color: #FFF;
}
}
@mixin keyframe ($animation_name) {
@-webkit-keyframes $animation_name {
@content;
}
@-moz-keyframes $animation_name {
@content;
}
@-o-keyframes $animation_name {
@content;
}
@keyframes $animation_name {
@content;
}
}
/*
Example usage:
@include animation(10s, 5s, changecolour)
*/
@mixin animation ($delay, $duration, $animation) {
-webkit-animation-delay: $delay;
-webkit-animation-duration: $duration;
-webkit-animation-name: $animation;
-webkit-animation-fill-mode: forwards; /* this prevents the animation from restarting! */
-moz-animation-delay: $delay;
-moz-animation-duration: $duration;
-moz-animation-name: $animation;
-moz-animation-fill-mode: forwards; /* this prevents the animation from restarting! */
-o-animation-delay: $delay;
-o-animation-duration: $duration;
-o-animation-name: $animation;
-o-animation-fill-mode: forwards; /* this prevents the animation from restarting! */
animation-delay: $delay;
animation-duration: $duration;
animation-name: $animation;
animation-fill-mode: forwards; /* this prevents the animation from restarting! */
}
@DevKareemReda
Copy link

Thank you very much

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