CSS3 text presentation (webkit only)

While procrastinating, I've discovered this french web-agency Actance and really liked their flash banner. So here it is, 4 hours later, a flash-like version entirely done with CSS3.

You must use the latest webkit nightly in order to view this animation !

Hello there ! My name is Francois-Guillame Ribreau. I'm a french web-developper. I've created this demo using only CSS3. You can follow me on Twitter @FGRibreau.

If you don't have webkit installed, watch this:

@font-face
{
	font-family: SansSerifFLF;
	src: url('/css/fonts/SansSerifFLF.otf');
}

/* Texte */
@-webkit-keyframes openingTextIntro{
		0% {} 100% {color:#dfdfdf; }
}

/* Links */
@-webkit-keyframes showLink1{
		0% {} 100% {color:#a19e9b; }
}

@-webkit-keyframes showLink2{
		0% {} 100% {color:#75E4F2; }
}
@-webkit-keyframes showLink3{
		0% {} 100% {color:#D2F11F;}
}
		
@-webkit-keyframes showLink4{
		0% {} 100% {color:#f15a1f;}
}

/* Swing */
@-webkit-keyframes swingLink{
		0% {-webkit-transform: rotateZ(0deg);}
		12%{-webkit-transform: rotateZ(-3deg);}
		25%{-webkit-transform: rotateZ(3deg);}
		37%{-webkit-transform: rotateZ(0deg);}
		100%{-webkit-transform: rotateZ(0deg);}
}

/* CSS */

#text-intro
{
	[...]
	font-family: SansSerifFLF, sans-serif;
	
	-webkit-animation: openingTextIntro 2s ease-out 1700ms 1 normal forwards;
}

#text-intro a:nth-child(4n+1){-webkit-animation: showLink1 1s ease-out 0s 1 normal forwards;}

#text-intro a:nth-child(4n+2){
	-webkit-animation: showLink2 1s ease-out 500ms 1 normal forwards, swingLink 2s ease-in-out 4s infinite;
}

#text-intro a:nth-child(4n+3){-webkit-animation: showLink3 1s ease-out 1000ms 1 normal forwards;}

#text-intro a:nth-child(4n+4){-webkit-animation: showLink4 1s ease-out 1500ms 1 normal forwards;}