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.
CSS 3 animations are pretty simple to set up and it’s great that they work without JavaScript. There are a lot of instances that I think using CSS Animations make a lot more sense than using JavaScript, but this example could be reproduce with much less code if I were already loading in jQuery.
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.