lychee/css/animations.css

/**
 * @name        animations.css
 * @author      Philipp Maurer
 * @author      Tobias Reich
 * @copyright   2013 by Philipp Maurer, Tobias Reich
 */

/* bounceInDown ------------------------------------------------*/
@-webkit-keyframes bounceInDown {
	0% {
		-webkit-transform: translateY(-2000px);
	}
	60% {
		-webkit-transform: translateY(30px);
	}
	80% {
		-webkit-transform: translateY(-10px);
	}
	100% {
		-webkit-transform: translateY(0);
	}
}
@-moz-keyframes bounceInDown {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
@-ms-keyframes bounceInDown {
	0% {
		-ms-transform: translateY(-2000px);
	}
	60% {
		-ms-transform: translateY(30px);
	}
	80% {
		-ms-transform: translateY(-10px);
	}
	100% {
		-ms-transform: translateY(0);
	}
}
@-o-keyframes bounceInDown {
	0% {
		-o-transform: translateY(-2000px);
	}
	60% {
		-o-transform: translateY(30px);
	}
	80% {
		-o-transform: translateY(-10px);
	}
	100% {
		-o-transform: translateY(0);
	}
}
@keyframes bounceInDown {
	0% {
		transform: translateY(-2000px);
	}
	60% {
		transform: translateY(30px);
	}
	80% {
		transform: translateY(-10px);
	}
	100% {
		transform: translateY(0);
	}
}

/* bounceOutUp ------------------------------------------------*/
@-webkit-keyframes bounceOutUp {
	0% {
		-webkit-transform: translateY(0);
	}
	20% {
		-webkit-transform: translateY(20px);
	}
	100% {
		-webkit-transform: translateY(-2000px);
	}
}
@-moz-keyframes bounceOutUp {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}
@-ms-keyframes bounceOutUp {
	0% {
		-ms-transform: translateY(0);
	}
	20% {
		-ms-transform: translateY(20px);
	}
	100% {
		-ms-transform: translateY(-2000px);
	}
}
@-o-keyframes bounceOutUp {
	0% {
		-o-transform: translateY(0);
	}
	20% {
		-o-transform: translateY(20px);
	}
	100% {
		-o-transform: translateY(-2000px);
	}
}
@keyframes bounceOutUp {
	0% {
		transform: translateY(0);
	}
	20% {
		transform: translateY(20px);
	}
	100% {
		transform: translateY(-2000px);
	}
}

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

/* moveDown ------------------------------------------------*/
@-webkit-keyframes moveDown {
	0% {
		-webkit-transform: translateY(-100px);
	}
	100% {
		-webkit-transform: translateY(0);
	}
}
@-moz-keyframes moveDown {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
@-ms-keyframes moveDown {
	0% {
		-ms-transform: translateY(-100px);
	}
	100% {
		-ms-transform: translateY(0);
	}
}
@-o-keyframes moveDown {
	0% {
		-o-transform: translateY(-100px);
	}
	100% {
		-o-transform: translateY(0);
	}
}
@keyframes moveDown {
	0% {
		transform: translateY(-100px);
	}
	100% {
		transform: translateY(0);
	}
}

/* fadeIn ------------------------------------------------*/
@-webkit-keyframes fadeIn {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
@-moz-keyframes fadeIn {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
@-ms-keyframes fadeIn {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
@-o-keyframes fadeIn {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
@keyframes fadeIn {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

/* fadeOut ------------------------------------------------*/
@-webkit-keyframes fadeOut {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}
@-moz-keyframes fadeOut {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}
@-ms-keyframes fadeOut {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}
@-o-keyframes fadeOut {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}
@keyframes fadeOut {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

/* moveBackground ------------------------------------------------*/
@-webkit-keyframes moveBackground {
	0% {
		background-position-x: 0px;
	}
	100% {
		background-position-x: -33px;
	}
}
@-moz-keyframes moveBackground {
	0% {
		background-position-x: 0px;
	}
	100% {
		background-position-x: -33px;
	}
}
@-ms-keyframes moveBackground {
	0% {
		background-position-x: 0px;
	}
	100% {
		background-position-x: -33px;
	}
}
@-o-keyframes moveBackground {
	0% {
		background-position-x: 0px;
	}
	100% {
		background-position-x: -33px;
	}
}
@keyframes moveBackground {
	0% {
		background-position-x: 0px;
	}
	100% {
		background-position-x: -33px;
	}
}

/* zoomOut ------------------------------------------------*/
@-webkit-keyframes zoomOut {
	0% {
		opacity: 1;
		-webkit-transform: scale(1);
	}
	100% {
		opacity: 0;
		-webkit-transform: scale(.5);
	}
}
@-moz-keyframes zoomOut {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}
@-ms-keyframes zoomOut {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}
@-o-keyframes zoomOut {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}
@keyframes zoomOut {
	0% {
		opacity: 1;
		transform: scale(1);
	}
	100% {
		opacity: 0;
		transform: scale(.5);
	}
}

/* zoomIn ------------------------------------------------*/
@-webkit-keyframes zoomIn {
	0% {
		opacity: 0;
		-webkit-transform: scale(.5);
	}
	100% {
		opacity: 1;
		-webkit-transform: scale(1);
	}
}
@-moz-keyframes zoomIn {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
@-ms-keyframes zoomIn {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
@-o-keyframes zoomIn {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
@keyframes zoomIn {
	0% {
		opacity: 0;
		transform: scale(.5);
	}
	100% {
		opacity: 1;
		transform: scale(1);
	}
}

/* shake ------------------------------------------------*/
@-webkit-keyframes shake {
	0%, 100% { -webkit-transform: translateX(0); }
	10%, 30%, 50%, 70%, 90% { -webkit-transform: translateX(-10px); }
	20%, 40%, 60%, 80% { -webkit-transform: translateX(10px); }
}
@-moz-keyframes shake {
	0%, 100% { -moz-transform: translateX(0);}
	10%, 30%, 50%, 70%, 90% { -moz-transform: translateX(-10px); }
	20%, 40%, 60%, 80% { -moz-transform: translateX(10px); }
}
@-o-keyframes shake {
	0%, 100% { -o-transform: translateX(0);}
	10%, 30%, 50%, 70%, 90% { -o-transform: translateX(-10px); }
	20%, 40%, 60%, 80% { -o-transform: translateX(10px); }
}
@keyframes shake {
	0%, 100% { transform: translateX(0);}
	10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); }
	20%, 40%, 60%, 80% { transform: translateX(10px); }
}

/* pulse ------------------------------------------------*/
@-webkit-keyframes pulse {
	0% {
		opacity: 1;
	}
	50% {
		opacity: 0.3;
	}
	100% {
		opacity: 1;
	}
}
@-moz-keyframes pulse {
	0% {
		opacity: 1;
	}
	50% {
		opacity: 0.8;
	}
	100% {
		opacity: 1;
	}
}
@-ms-keyframes pulse {
	0% {
		opacity: 1;
	}
	50% {
		opacity: 0.8;
	}
	100% {
		opacity: 1;
	}
}
@-o-keyframes pulse {
	0% {
		opacity: 1;
	}
	50% {
		opacity: 0.8;
	}
	100% {
		opacity: 1;
	}
}
@keyframes pulse {
	0% {
		opacity: 1;
	}
	50% {
		opacity: 0.8;
	}
	100% {
		opacity: 1;
	}
}