I’ve been playing around with CSS 3 animations lately and here’s something simple that I came up with. http://www.ejhansel.com/cssAnimation/
I wouldn’t recommend putting something like this live on any site(ahh, maybe a one page poster style site), but it’s nice to take a look at and get an understanding for how it’s done.
As of writing this post CSS 3 Animations only work in the newest versions of Firefox, Chrome and Safari, I haven’t tested I.E. 9. Firefox and Safari seem much smother than Chrome which seems strange to me. I’ve also added a CSS 3 mask to the whole thing which is only visible in Safari and Chrome.
Firefox seems to have problems with animating span tags so if you look at the code you’ll notice I’ve used div tags around the letters in the H1 tag. I’d never recommend doing this, but this is just an experiment.
If you’d like to play around with this CSS 3 Experiment you can download the files here.
View the experiment here.