Skip to content

Instantly share code, notes, and snippets.

@mbader
Last active January 14, 2021 11:52
Show Gist options
  • Save mbader/f88add78e284910ddf12 to your computer and use it in GitHub Desktop.
Save mbader/f88add78e284910ddf12 to your computer and use it in GitHub Desktop.
Sass Staggered Transition Delay
// ----
// Sass (v3.4.14)
// Compass (v1.0.3)
// ----
@mixin staggered_transitions($nth:1,$items:2,$initial:0,$step:.1){
@for $i from $nth through $items{
&:nth-of-type(#{$i}){
transition-delay:#{$initial}s;
}
$initial: $initial + $step;
}
}
.item {
@include staggered_transitions($items:10,$nth:2,$initial:.3,$step:.2)
}
.item:nth-of-type(2) {
transition-delay: 0.3s;
}
.item:nth-of-type(3) {
transition-delay: 0.5s;
}
.item:nth-of-type(4) {
transition-delay: 0.7s;
}
.item:nth-of-type(5) {
transition-delay: 0.9s;
}
.item:nth-of-type(6) {
transition-delay: 1.1s;
}
.item:nth-of-type(7) {
transition-delay: 1.3s;
}
.item:nth-of-type(8) {
transition-delay: 1.5s;
}
.item:nth-of-type(9) {
transition-delay: 1.7s;
}
.item:nth-of-type(10) {
transition-delay: 1.9s;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment