/*CSS ANIMATOR BY GORDON CHENG */

/*popup */

.popup {
	animation-name: popup;
	animation-duration: 2s;
	animation-timing-function: ease-in-out;
	transform-origin: 50% 100%;
}

@keyframes popup {
	0% {
		transform: rotate(0deg) scaleY(0.5);
	}
	20% {
		transform: rotate(-4deg) scaleY(1.2);
	}
	35% {
		transform: rotate(4deg) scaleY(1);
	}
	50% {
		transform: rotate(-4deg);
	}
	65% {
		transform: rotate(4deg);
	}
	80% {
		transform: rotate(-4deg);
	}
	100% {
		transform: rotate(0deg);
	}
}


/*breathing*/

.breathing {
	animation-name: breathing;
	animation-duration: 2.5s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-out;
}

@keyframes breathing {
	0% {
		transform: scale(1);
	}
	25% {
		transform: scale(1.1);
	}
	75% {
		transform: scale(0.8);
	}
	100% {
		transform: scale(1);
	}
}


/*Rocking*/

.rocking {
	animation-name: rocking;
	animation-duration: 1.5s;
	animation-iteration-count: infinite;
}

@keyframes rocking {
	0% {
		transform: rotate(-7deg);
	}
	50% {
		transform: rotate(7deg);
	}
	100% {
		transform: rotate(-7deg);
	}
}


/*squish*/

.squishY {
	animation-name: squishY;
	animation-duration: 4s;
	animation-iteration-count: 1;
}

@keyframes squish {
	0% {
		transform: scale(1.0);
	}
	100% {
		transform: scale(0);
	}
}

.squish {
	animation-name: squish;
	animation-duration: 4s;
	animation-iteration-count: 1;
}

@keyframes squishY {
	0% {
		transform: scaleY(1.0);
	}
	100% {
		transform: scaleY(0);
	}
}

.squishX {
	animation-name: squishX;
	animation-duration: 2s;
	animation-iteration-count: 1;
}

@keyframes squishX {
	0% {
		transform: scaleX(1.0);
	}
	100% {
		transform: scaleX(0);
	}
}


/*expand*/

.expand {
	animation-name: expand;
	animation-duration: 4s;
	animation-iteration-count: 1;
}

@keyframes expand {
	0% {
		transform: scale(0);
	}
	100% {
		transform: scale(1);
	}
}

.expandX {
	animation-name: expandX;
	animation-duration: 4s;
	animation-iteration-count: 1;
}

@keyframes expandX {
	0% {
		transform: scaleX(0);
	}
	100% {
		transform: scaleX(1);
	}
}

.expandY {
	animation-name: expandY;
	animation-duration: 4s;
	animation-iteration-count: 1;
}

@keyframes expandY {
	0% {
		transform: scaleY(0);
	}
	100% {
		transform: scaleY(1);
	}
}


/*stretch*/

.stretch {
	animation-name: stretch;
	animation-duration: 4s;
	animation-iteration-count: 1;
}

@keyframes stretch {
	0% {
		transform: scale(1);
	}
	86% {
		transform: scale(2.5);
	}
	92% {
		transform: scale(0.5);
	}
	96% {
		transform: scale(1.2);
	}
	100% {
		transform: scale(1);
	}
}

.stretchX {
	animation-name: stretchX;
	animation-duration: 4s;
	animation-iteration-count: 1;
}

@keyframes stretchX {
	0% {
		transform: scaleX(1);
	}
	86% {
		transform: scaleX(2.5);
	}
	92% {
		transform: scaleX(0.5);
	}
	96% {
		transform: scaleX(1.2);
	}
	100% {
		transform: scaleX(1);
	}
}

.stretchY {
	animation-name: stretchY;
	animation-duration: 4s;
	animation-iteration-count: 1;
}

@keyframes stretchY {
	0% {
		transform: scaleY(1);
	}
	86% {
		transform: scaleY(2.5);
	}
	92% {
		transform: scaleY(0.5);
	}
	96% {
		transform: scaleY(1.2);
	}
	100% {
		transform: scaleY(1);
	}
}


/*shake*/

.shake {
	animation-name: shake;
	animation-duration: 2s;
	animation-iteration-count: 1;
}

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


/*fades*/

.fadeOut {
	animation-name: fadeOut;
	animation-duration: 4s;
	animation-iteration-count: 1;
}

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

.fadeIn {
	animation-name: fadeIn;
	animation-duration: 4s;
	animation-iteration-count: 1;
}

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


/*bounce animation*/

.bounce {
	animation-name: bounce;
	animation-duration: 2s;
	animation-iteration-count: 1;
}

@keyframes bounce {
	0%,
	20%,
	50%,
	80%,
	100% {
		transform: translateY(0);
	}
	10% {
		transform: translateY(-30px);
	}
	35% {
		transform: translateY(-15px);
	}
	70% {
		transform: translateY(-5px);
	}
}


/*flip*/

.flipZ {
	animation-name: flipZ;
	animation-duration: 2s;
	animation-iteration-count: 1;
}

@keyframes flipZ {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

.flipY {
	animation-name: flipY;
	animation-duration: 3s;
	animation-iteration-count: 1;
}

@keyframes flipY {
	from {
		transform: rotatey(0deg);
	}
	to {
		transform: rotatey(360deg);
	}
}

.flipX {
	animation-name: flipX;
	animation-duration: 3s;
	animation-iteration-count: 1;
}

@keyframes flipX {
	from {
		transform: rotatex(0deg);
	}
	to {
		transform: rotatex(360deg);
	}
}


/*cycle through all hues*/

.colorCycle {
	-webkit-animation-name: colorCycle;
	-webkit-animation-duration: 5s;
	-webkit-animation-iteration-count: 1;
	animation-name: colorCycle;
	animation-duration: 5s;
	animation-iteration-count: 1;
}

@keyframes colorCycle {
	from {
		-webkit-filter: hue-rotate(0deg);
		filter: hue-rotate(0deg);
	}
	to {
		-webkit-filter: hue-rotate(360deg);
		filter: hue-rotate(360deg);
	}
}


/*Float*/

.floating {
	animation-name: floating;
	animation-duration: 3s;
	animation-iteration-count: infinite;
}

@keyframes floating {
	0% {
		transform: translateY(0%);
	}
	50% {
		transform: translateY(8%);
	}
	100% {
		transform: translateY(0%);
	}
}