#box-container {
	margin: 0 auto;
}

.box {
	height: 200px;
	width: 150px;
	margin: 20px;
	display: inline-block;
	cursor: pointer;
}

#blue {
	background-color: blue;
}

#green {
	background-color: green;
}

#red {
	background-color: red;
}

#yellow {
	background-color: yellow;
}


/*Keyframes animation.*/
@keyframes colorSwitch {
    0%   {background-color: red;}
    25%  {background-color: yellow;}
    50%  {background-color: blue;}
    100% {background-color: green;}
}

/* Test animations. */
.shake {
	-webkit-animation: shake 1s 2;
	-moz-animation: shake 1s 2;
	-ms-animation: shake 1s 2;
	animation: shake 1s 2;
}
.hop {
	-webkit-animation: hop 2s;
	-moz-animation: hop 2s;
	-ms-animation: hop 2s;
	animation: hop 2s;
}
.spin {
	-webkit-animation: spin 2s;
	-moz-animation: spin 2s;
	-ms-animation: spin 2s;
	animation: spin 2s;
}
.grow {
	z-index: 30;
	-webkit-animation: grow 2s;
	-moz-animation: grow 2s;
	-ms-animation: grow 2s;
	animation: grow 2s;
}
.hooray {
	z-index: 20;
	-webkit-animation: hooray 2s;
	-moz-animation: hooray 2s;
	-ms-animation: hooray 2s;
	animation: hooray 2s;
}

/* Webkit Animations */

@-webkit-keyframes shake {
	0%, 100% {-webkit-transform: translateX(0);}
	5%, 15%, 25%, 35%, 45%, 55%, 65%, 75%, 85%, 95% {-webkit-transform: translateX(-20px);}
	10%, 20%, 30%, 40%, 50%, 60%, 70%, 80%, 90% {-webkit-transform: translateX(20px);}
}

@-webkit-keyframes hop {
	0% {-webkit-transform: translateX(0);}
	12% {-webkit-transform: translateY(-100px) rotate(-20deg);}
	25% {-webkit-transform: translateX(-20px);}
	37% {-webkit-transform: translateY(-100px) rotate(20deg);}
	50% {-webkit-transform: translateX(20px);}
	62% {-webkit-transform: translateY(-100px) rotate(-20deg);}
	75% {-webkit-transform: translateX(-20px);}
	87% {-webkit-transform: translateY(-100px) rotate(20deg);}
	100% {-webkit-transform: translateX(0);}
}

@-webkit-keyframes spin {
	0% {-webkit-transform: rotate(0deg)}
	8% {-webkit-transform: rotate(-50deg)}
	12% {-webkit-transform: rotate(-50deg) }
	100% {-webkit-transform: rotate(3600deg)}
}

@-webkit-keyframes grow {
	0% { -webkit-transform: scale(1); }
	75% { -webkit-transform: scale(2.5); }
	90% { -webkit-transform: scale(0.6); }
	93% { -webkit-transform: scale(1.4); }
	95% { -webkit-transform: scale(0.8); }
	97% { -webkit-transform: scale(1.2); }
	100% { -webkit-transform: scale(1); }
}

@-webkit-keyframes hooray {
	0% {-webkit-transform: translateX(0) translateY(0) scale(1, 1);}
	10% {-webkit-transform: translateX(60px) translateY(-60px) scale(1.5, 1.5);}
	20% {-webkit-transform: translateX(0) translateY(0) scale(.7, .7);}
	30% {-webkit-transform: translateX(-60px) translateY(-60px) scale(1.5, 1.5);}
	40% {-webkit-transform: translateX(0) translateY(0) scale(.7, .7);}
	50% {-webkit-transform: translateX(60px) translateY(-60px) scale(1.5, 1.5);}
	60% {-webkit-transform: translateX(0) translateY(0) scale(.7, .7);}
	70% {-webkit-transform: translateX(-60px) translateY(-60px) scale(1.5, 1.5);}	
	80% {-webkit-transform: translateX(0) translateY(0) scale(.7, .7);}
	90% {-webkit-transform: translateX(60px) translateY(-60px) scale(1.5, 1.5);}
	100% {-webkit-transform: translateX(0) translateY(0) scale(1, 1);}
}

/* Moz Animations */

@-moz-keyframes shake {
	0%, 100% {-moz-transform: translateX(0);}
	5%, 15%, 25%, 35%, 45%, 55%, 65%, 75%, 85%, 95% {-moz-transform: translateX(-20px);}
	10%, 20%, 30%, 40%, 50%, 60%, 70%, 80%, 90% {-moz-transform: translateX(20px);}
}

@-moz-keyframes hop {
	0% {-moz-transform: translateX(0);}
	12% {-moz-transform: translateY(-100px) rotate(-20deg);}
	25% {-moz-transform: translateX(-20px);}
	37% {-moz-transform: translateY(-100px) rotate(20deg);}
	50% {-moz-transform: translateX(20px);}
	62% {-moz-transform: translateY(-100px) rotate(-20deg);}
	75% {-moz-transform: translateX(-20px);}
	87% {-moz-transform: translateY(-100px) rotate(20deg);}
	100% {-moz-transform: translateX(0);}
}

@-moz-keyframes spin {
	0% {-moz-transform: rotate(0deg)}
	8% {-moz-transform: rotate(-50deg)}
	12% {-moz-transform: rotate(-50deg) }
	100% {-moz-transform: rotate(3600deg)}
}

@-moz-keyframes grow {
	0% { -moz-transform: scale(1); }
	75% { -moz-transform: scale(2.5); }
	90% { -moz-transform: scale(0.6); }
	93% { -moz-transform: scale(1.4); }
	95% { -moz-transform: scale(0.8); }
	97% { -moz-transform: scale(1.2); }
	100% { -moz-transform: scale(1); }
}

@-moz-keyframes hooray {
	0% {-moz-transform: translateX(0) translateY(0) scale(1, 1);}
	10% {-moz-transform: translateX(60px) translateY(-60px) scale(1.5, 1.5);}
	20% {-moz-transform: translateX(0) translateY(0) scale(.7, .7);}
	30% {-moz-transform: translateX(-60px) translateY(-60px) scale(1.5, 1.5);}
	40% {-moz-transform: translateX(0) translateY(0) scale(.7, .7);}
	50% {-moz-transform: translateX(60px) translateY(-60px) scale(1.5, 1.5);}
	60% {-moz-transform: translateX(0) translateY(0) scale(.7, .7);}
	70% {-moz-transform: translateX(-60px) translateY(-60px) scale(1.5, 1.5);}	
	80% {-moz-transform: translateX(0) translateY(0) scale(.7, .7);}
	90% {-moz-transform: translateX(60px) translateY(-60px) scale(1.5, 1.5);}
	100% {-moz-transform: translateX(0) translateY(0) scale(1, 1);}
}

/* Opera Animations */

@-o-keyframes shake {
	0%, 100% {-o-transform: translateX(0);}
	5%, 15%, 25%, 35%, 45%, 55%, 65%, 75%, 85%, 95% {-o-transform: translateX(-20px);}
	10%, 20%, 30%, 40%, 50%, 60%, 70%, 80%, 90% {-o-transform: translateX(20px);}
}

@-o-keyframes hop {
	0% {-o-transform: translateX(0);}
	12% {-o-transform: translateY(-100px) rotate(-20deg);}
	25% {-o-transform: translateX(-20px);}
	37% {-o-transform: translateY(-100px) rotate(20deg);}
	50% {-o-transform: translateX(20px);}
	62% {-o-transform: translateY(-100px) rotate(-20deg);}
	75% {-o-transform: translateX(-20px);}
	87% {-o-transform: translateY(-100px) rotate(20deg);}
	100% {-o-transform: translateX(0);}
}

@-o-keyframes spin {
	0% {-o-transform: rotate(0deg)}
	8% {-o-transform: rotate(-50deg)}
	12% {-o-transform: rotate(-50deg) }
	100% {-o-transform: rotate(3600deg)}
}

@-o-keyframes grow {
	0% { -o-transform: scale(1); }
	75% { -o-transform: scale(2.5); }
	90% { -o-transform: scale(0.6); }
	93% { -o-transform: scale(1.4); }
	95% { -o-transform: scale(0.8); }
	97% { -o-transform: scale(1.2); }
	100% { -o-transform: scale(1); }
}

@-o-keyframes hooray {
	0% {-o-transform: translateX(0) translateY(0) scale(1, 1);}
	10% {-o-transform: translateX(60px) translateY(-60px) scale(1.5, 1.5);}
	20% {-o-transform: translateX(0) translateY(0) scale(.7, .7);}
	30% {-o-transform: translateX(-60px) translateY(-60px) scale(1.5, 1.5);}
	40% {-o-transform: translateX(0) translateY(0) scale(.7, .7);}
	50% {-o-transform: translateX(60px) translateY(-60px) scale(1.5, 1.5);}
	60% {-o-transform: translateX(0) translateY(0) scale(.7, .7);}
	70% {-o-transform: translateX(-60px) translateY(-60px) scale(1.5, 1.5);}	
	80% {-o-transform: translateX(0) translateY(0) scale(.7, .7);}
	90% {-o-transform: translateX(60px) translateY(-60px) scale(1.5, 1.5);}
	100% {-o-transform: translateX(0) translateY(0) scale(1, 1);}
}

/* MS Animations */

@-ms-keyframes shake {
	0%, 100% {-ms-transform: translateX(0);}
	5%, 15%, 25%, 35%, 45%, 55%, 65%, 75%, 85%, 95% {-ms-transform: translateX(-20px);}
	10%, 20%, 30%, 40%, 50%, 60%, 70%, 80%, 90% {-ms-transform: translateX(20px);}

@-ms-keyframes hop {
	0% {-ms-transform: translateX(0);}
	12% {-ms-transform: translateY(-100px) rotate(-20deg);}
	25% {-ms-transform: translateX(-20px);}
	37% {-ms-transform: translateY(-100px) rotate(20deg);}
	50% {-ms-transform: translateX(20px);}
	62% {-ms-transform: translateY(-100px) rotate(-20deg);}
	75% {-ms-transform: translateX(-20px);}
	87% {-ms-transform: translateY(-100px) rotate(20deg);}
	100% {-ms-transform: translateX(0);}
}

@-ms-keyframes spin {
	0% {-ms-transform: rotate(0deg)}
	8% {-ms-transform: rotate(-50deg)}
	12% {-ms-transform: rotate(-50deg) }
	100% {-ms-transform: rotate(3600deg)}
}

@-ms-keyframes grow {
	0% { -ms-transform: scale(1); }
	75% { -ms-transform: scale(2.5); }
	90% { -ms-transform: scale(0.6); }
	93% { -ms-transform: scale(1.4); }
	95% { -ms-transform: scale(0.8); }
	97% { -ms-transform: scale(1.2); }
	100% { -ms-transform: scale(1); }
}

@-ms-keyframes hooray {
	0% {-ms-transform: translateX(0) translateY(0) scale(1, 1);}
	10% {-ms-transform: translateX(60px) translateY(-60px) scale(1.5, 1.5);}
	20% {-ms-transform: translateX(0) translateY(0) scale(.7, .7);}
	30% {-ms-transform: translateX(-60px) translateY(-60px) scale(1.5, 1.5);}
	40% {-ms-transform: translateX(0) translateY(0) scale(.7, .7);}
	50% {-ms-transform: translateX(60px) translateY(-60px) scale(1.5, 1.5);}
	60% {-ms-transform: translateX(0) translateY(0) scale(.7, .7);}
	70% {-ms-transform: translateX(-60px) translateY(-60px) scale(1.5, 1.5);}	
	80% {-ms-transform: translateX(0) translateY(0) scale(.7, .7);}
	90% {-ms-transform: translateX(60px) translateY(-60px) scale(1.5, 1.5);}
	100% {-ms-transform: translateX(0) translateY(0) scale(1, 1);}
}

/* Arbitrary Animations */

@keyframes shake {
	0%, 100% {transform: translateX(0);}
	5%, 15%, 25%, 35%, 45%, 55%, 65%, 75%, 85%, 95% {transform: translateX(-20px);}
	10%, 20%, 30%, 40%, 50%, 60%, 70%, 80%, 90% {transform: translateX(20px);}
}

@keyframes hop {
	0% {transform: translateX(0);}
	12% {transform: translateY(-100px) rotate(-20deg);}
	25% {transform: translateX(-20px);}
	37% {transform: translateY(-100px) rotate(20deg);}
	50% {transform: translateX(20px);}
	62% {transform: translateY(-100px) rotate(-20deg);}
	75% {transform: translateX(-20px);}
	87% {transform: translateY(-100px) rotate(20deg);}
	100% {transform: translateX(0);}
}

@keyframes spin {
	0% {transform: rotate(0deg)}
	8% {transform: rotate(-50deg)}
	12% {transform: rotate(-50deg) }
	100% {transform: rotate(3600deg)}
}

@keyframes grow {
    0% { transform: scale(1); }
	75% { transform: scale(2.5); }
	90% { transform: scale(0.6); }
	93% { transform: scale(1.4); }
	95% { transform: scale(0.8); }
	97% { transform: scale(1.2); }
	100% { transform: scale(1); }
}

@keyframes hooray {
	0% {transform: translateX(0) translateY(0) scale(1, 1);}
	10% {transform: translateX(60px) translateY(-60px) scale(1.5, 1.5);}
	20% {transform: translateX(0) translateY(0) scale(.7, .7);}
	30% {transform: translateX(-60px) translateY(-60px) scale(1.5, 1.5);}
	40% {transform: translateX(0) translateY(0) scale(.7, .7);}
	50% {transform: translateX(60px) translateY(-60px) scale(1.5, 1.5);}
	60% {transform: translateX(0) translateY(0) scale(.7, .7);}
	70% {transform: translateX(-60px) translateY(-60px) scale(1.5, 1.5);}	
	80% {transform: translateX(0) translateY(0) scale(.7, .7);}
	90% {transform: translateX(60px) translateY(-60px) scale(1.5, 1.5);}
	100% {transform: translateX(0) translateY(0) scale(1, 1);}
}