Skip to content

Instantly share code, notes, and snippets.

@rutger1140
Last active May 16, 2018 15:25
Show Gist options
  • Save rutger1140/a72e8507aba3ee9f42364fe461351bc0 to your computer and use it in GitHub Desktop.
Save rutger1140/a72e8507aba3ee9f42364fe461351bc0 to your computer and use it in GitHub Desktop.
SASS mixin for crossfading elements
//
// SASS mixin for crossfading elements
//
// Usage:
//
// .element {
// @include crossfade($num: 2, $fade: 5, $visible: 0);
//
// left: 0;
// opacity: 0;
// position: absolute;
// top: 0;
// }
//
// Source: https://snook.ca/archives/html_and_css/simplest-css-slideshow
//
@mixin crossfade($num: 1, $fade: 1, $visible: 2) {
$a: 100 / (($fade + $visible) * $num);
@keyframes crossfade {
0% {
opacity: 0;
}
#{$a * $fade}% {
opacity: 1;
}
#{$a *($fade + $visible)}% {
opacity: 1;
}
#{$a *($fade + $visible + $fade)}% {
opacity: 0;
}
100% {
opacity: 0;
}
}
animation-name: crossfade;
animation-duration: (($fade + $visible) * $num) + s;
animation-iteration-count: infinite;
@for $i from 1 through $num {
&:nth-child(#{$i}) {
animation-delay: #{($fade + $visible) * ($i - 1) + s};
}
}
}
@rutger1140
Copy link
Author

Original created by Jonathan Snook:
https://snook.ca/archives/html_and_css/simplest-css-slideshow

This is merely my backup copy. All rights reserved.

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