lychee/src/styles/_animations.scss

// Animation Setter ---------------------------------------------------- //
.fadeIn {
	animation-name: fadeIn;
	animation-duration: .3s;
	animation-fill-mode: forwards;
	animation-timing-function: $timing;
}

.fadeOut {
	animation-name: fadeOut;
	animation-duration: .3s;
	animation-fill-mode: forwards;
	animation-timing-function: $timing;
}

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

@keyframes fadeOut {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

// Move -------------------------------------------------------------- //
@keyframes moveBackground {
	0% {
		background-position-x: 0px;
	}
	100% {
		background-position-x: -100px;
	}
}

// Zoom -------------------------------------------------------------- //
@keyframes zoomIn {
	0% {
		opacity: 0;
		transform: scale(.8);
	}
	100% {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes zoomOut {
	0% {
		opacity: 1;
		transform: scale(1);
	}
	100% {
		opacity: 0;
		transform: scale(.8);
	}
}

// Pulse -------------------------------------------------------------- //
@keyframes pulse {
	0% {
		opacity: 1;
	}
	50% {
		opacity: .3;
	}
	100% {
		opacity: 1;
	}
}