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;
}

/* moveUp ------------------------------------------------*/
@keyframes moveUp {
	0% {
		transform: translateY(100px);
		opacity: 0;
	}
	100% {
		transform: translateY(0);
		opacity: 1;
	}
}

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

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

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

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

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

/* popIn ------------------------------------------------*/
@keyframes popIn {
	0% {
		opacity: 0;
		transform: scale(0);
	}
	100% {
		opacity: 1;
		transform: scale(1);
	}
}

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