lychee/assets/scss/animations.scss

/**
 * @name        animations.css
 * @author      Tobias Reich
 * @copyright   2014 by Tobias Reich
 */

/* Animation Setter ------------------------------------------------*/
.fadeIn {
	animation-name: fadeIn;
	animation-duration: .3s;
	animation-fill-mode: forwards;
	animation-timing-function: cubic-bezier(0.51,.92,.24,1.15); }

.fadeOut {
	animation-name: fadeOut;
	animation-duration: .3s;
	animation-fill-mode: forwards;
	animation-timing-function: cubic-bezier(0.51,.92,.24,1.15); }

.contentZoomIn {
	animation-name: zoomIn;
	animation-duration: .2s;
	animation-fill-mode: forwards;
	animation-timing-function: cubic-bezier(0.51,.92,.24,1); }

.contentZoomOut {
	animation-name: zoomOut;
	animation-duration: .2s;
	animation-fill-mode: forwards;
	animation-timing-function: cubic-bezier(0.51,.92,.24,1); }

/* 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: 0.3;
	}
	100% {
		opacity: 1;
	}
}