V for Vendetta, Typography with HTML5 & CSS3

Project Information

Update: Within 12 hours after I published this project on forrst, I got a lot of positive reactions and even made it to the #1 position on popular posts at forrst. At the end of this post you'll see some screenshots. (I've removed avatars and names at the last screenshot)

This project is, by far, the most complicated thing I have ever done so far. I love all those kinetic typography videos on YouTube, I even started in After Effects myself to give it a try, but I never finished anything. Now that I decided to develop my skills in HTML5 & CSS3 I tried to make a kintetic typography "video" and this is the result. It will only work in webkit browsers, because only those browsers support animation. Everything is made using a html file and 2 css files. One css file for the intro, where it says 'Click play to start' the other file is for all the moving words. The sound is from the movie 'V for Vendetta' you can find the whole dialog here: http://www.imdb.com/... 


Click on this image to view the project, but be sure to use a webkit browser!

Here is a little bit of css to show you how I did this, this code is just for the words, 'I' of the sentence: 'I can assure you I mean you no harm'

@-webkit-keyframes stage1scalein {
	0% {
	font-size: 100%;
	opacity: 0.0;
	}
	49%{
	opacity: 0.0;
	}
	50%{
	opacity: 1.0;
	}
	90%{
	font-size: 100%;
	}
	100% {
	font-size: 300%;
	}
}

What you see here is the code I used to make the word 'I' visible (50%) and to make it larger when the character says 'I' again (90% - 100%). To make this work, you have to add an animation to the css for the word 'I', like this:

#ID{
	-webkit-animation-name: stage1scalein;
	-webkit-animation-duration: 1.3s;
	-webkit-animation-timing-function: linear;
	font-size: 300%;
}

As you can see, I use '-webkit-animation:' to start. After that, I declare the name of the animation (stage1scalein), the duration of the animation (1.3s), and how the animation will progress over one cycle of its duration (linear).
To use this with the previous code this will result in the following: at 50% of its duration, that is 0.65s, the 'I' will become visible; at 90% of its duration, that is ~1.2s, the 'I' will start growing till 300%. This animation has ended, and you will now have a big 'I' on your screen. There is one important thing you have to know; To be sure the 'I' stays at 300%, you have to put this in the css as seen above and you have to set the size to 100% in the first code at 0%.

This is a little explenation, but not enough to show the whole video, the audio source for my next project will be a bit shorter, and maybe I can explain that one better. For now, just take a look at the source code (I tried to make it as clean as possible) and try it yourself!

Some screenshots with reactions about this project