A simple mixin to to animate an element to fade it in or fade it out.

fade-mixin.scss

/// Simple fade-in/out animation
/// @param {String} $type - "show" or "hide", defaults to "show"
/// @param {Number} $delay - Animation delay in seconds
/// @param {Number} $duration - Animation duration in seconds
/// @param {String} $timing-function - Animation timing function, defaults to "ease-in"
@mixin fade(
	$type: "show",
	$delay: 0s,
	$duration: 0.5s,
	$timing-function: ease-in,

) {
	@if $type == "hide" {
		animation: $duration fadeOutAnimation $timing-function;
		animation-delay: $delay;
		animation-fill-mode: forwards;
		@keyframes fadeOutAnimation {
			to {
				visibility: hidden;
				opacity: 0;
			}
		}
	} @else if $type == "show" {
		animation: $duration fadeInAnimation $timing-function;
		animation-delay: $delay;
		animation-iteration-count: 1;
		@keyframes fadeInAnimation {
			0% {
				opacity: 0;
			}
			100% {
				opacity: 1;
			}
		}
	}
}