Skip to content

Instantly share code, notes, and snippets.

@chasewoodford
Forked from saucer-jp/style.scss
Created June 16, 2012 02:12
Show Gist options
  • Save chasewoodford/2939636 to your computer and use it in GitHub Desktop.
Save chasewoodford/2939636 to your computer and use it in GitHub Desktop.
sass:mixin fadeIn
$prefix:'-moz-', '-webkit-', '-o-', '-ms-', '';
// ********************
// fadeIn
// ********************
@mixin keyframe-fadeIn {
0% { opacity:0; }
100% { opacity:1; }
}
@-moz-keyframes fadeIn {
@include keyframe-fadeIn;
}
@-webkit-keyframes fadeIn {
@include keyframe-fadeIn;
}
@-o-keyframes fadeIn {
@include keyframe-fadeIn;
}
@-ms-keyframes fadeIn {
@include keyframe-fadeIn;
}
@keyframes fadeIn {
@include keyframe-fadeIn;
}
@mixin fadeIn( $arg ) {
$keyframe-name:fadeIn;
$duration:$arg;
@each $p in $prefix {
#{$p}animation:$keyframe-name $duration;
}
}
// e.g. @include fadeIn( 2s );
@akosbalogh
Copy link

great mixin :) thanks!

@Paul-Morris
Copy link

Nice

@noahmistry
Copy link

noahmistry commented Nov 26, 2018

Thanks! Still useful as ever!

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