CSS Transform, Keyframe and Vendor Prefixes

css, transform, keyframe and vendor prefixes.css

/* animate, transform, keyframe use and the associated vendor prefixes */


.letter-container h2 a span:nth-child(even) {

	-webkit-transform: rotate(3deg) translateZ(0); /* apparently that Z stuff is needed for webkit browsers like chrome */
	-moz-transform: rotate(3deg);
	-o-transform: rotate(3deg);
	-ms-transform: rotate(3deg);
	transform: rotate(3deg);
}

.letter-container h2 a span:nth-child(odd) {
	-webkit-transform: rotate(-5deg) translateZ(0);
	-moz-transform: rotate(-5deg);
	-o-transform: rotate(-5deg);
	-ms-transform: rotate(-5deg);
	transform: rotate(-5deg);
}

.letter-container h2 a:hover span:nth-child(even) {

	-webkit-transform: scale(0.9) rotate(-5deg) translateZ(0);
	-moz-transform: scale(0.9) rotate(-5deg);
	-o-transform: scale(0.9) rotate(-5deg); /* can stack animations */
	-ms-transform: scale(0.9) rotate(-5deg);
	transform: scale(0.9) rotate(-5deg);
}

.letter-container h2 a:hover span:nth-child(odd) {
	-webkit-transform: scale(0.9) rotate(3deg) translateZ(0);
	-moz-transform: scale(0.9) rotate(3deg);
	-o-transform: scale(0.9) rotate(3deg);
	ms-transform: scale(0.9) rotate(3deg);
	transform: scale(0.9) rotate(3deg);
}

.letter-container h2 a span:nth-child(even):hover,
.letter-container h2 a span:nth-child(odd):hover {

	-webkit-animation: moveImg 9s linear infinite forwards;
	-moz-animation: moveImg 9s linear infinite forwards;
	-o-animation: moveImg 9s linear infinite forwards;
	-ms-animation: moveImg 9s linear infinite forwards;
	animation: moveImg 9s linear infinite forwards; /* call the custom moveImg that was defined earlier via @keyframe */
	
	color: rgba(255,255,255,0.4);
	text-shadow: 0px 0px 5px rgba(0,0,0,0.1);
	
	
	-webkit-transform: scale(1.1);
	-moz-transform: scale(1.1); /* scale seems to automatically cancel out any rotate */
	-o-transform: scale(1.1);
	-ms-transform: scale(1.1);
	transform: scale(1.1);
	
	
	z-index: 10;
	-o-box-shadow: 2px 2px 20px 4px rgba(0,0,0,0.6), 0px 0px 2px rgba(0,0,0,0.2) inset;
	-moz-box-shadow: 2px 2px 20px 4px rgba(0,0,0,0.6), 0px 0px 2px rgba(0,0,0,0.2) inset;
	-webkit-box-shadow: 2px 2px 20px 4px rgba(0,0,0,0.6), 0px 0px 2px rgba(0,0,0,0.2) inset;
	box-shadow: 2px 2px 20px 4px rgba(0,0,0,0.6), 0px 0px 2px rgba(0,0,0,0.2) inset;
}

@-webkit-keyframes moveImg { /* have to do a different keyframe for the different prefixes */
    0%{ 
		background-position: 50% 0%;
	}
	50%{
		background-position: 50% 100%;
	}
	100%{
		background-position: 50% 0%;
	}
}
@-moz-keyframes moveImg {
    0%{ 
		background-position: 50% 0%;
	}
	50%{
		background-position: 50% 100%;
	}
	100%{
		background-position: 50% 0%;
	}
}
@keyframes moveImg {
    0%{ 
		background-position: 50% 0%;
	}
	50%{
		background-position: 50% 100%;
	}
	100%{
		background-position: 50% 0%;
	}
}