/**
 * Iterative delay or the 'rolling piano effect'
 * puts a higher and higher transition-delay on items so they appear one after another
 */

@mixin iterative-delay($count: 2, $delay: 0.07s) {
	@for $i from 1 through $count {
		&:nth-child(#{$i}) {
			transition-delay: $delay * $i;
		}
	}
}

// Example:

/*
img {
	@include iterative-delay(10);
	transition: opacity 250ms ease-in-out;
	opacity: 0;

	// show them when they are loaded or if we dont have js
	.is-active &,
	.no-js & {
		opacity: 1;
	}
}
*/

// Fade-in
@keyframes fadeIn {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}
// Fade-in and down
@keyframes fadeInDown {
	0% {
		opacity: 0.75;
		transform: translateY(-5px);
	}

	100% {
		opacity: 1;
		transform: translateY(0);
	}
}
// Fade-in and down
@keyframes fadeInUp {
	0% {
		opacity: 0.75;
		transform: translateY(5px);
	}

	100% {
		opacity: 1;
		transform: translateY(0);
	}
}