CSS 3: Transitions and Transformations

The three people who follow along this blog will remember that, I wrote a post sometime ago about CSS 3. I went through my CSS 3 Fun Box on my HTML5/CSS 3 Test page and I explained what each new CSS 3 property did. I also had a small Transition demo of a box using the scale property. Truth be told, that wasn’t enough. Now that Firefox 4 is out, I wanted to do something  just a little bigger and in conjunction with Transformations. Here is the end result (there is also a link to it on my test page). I’m going to leave alone my original thoughts about CSS 3 Transitions. Just keep in mind that the code is based on an example that is no longer there.

With that said, I’m going to let my demo do the talking. Remember that you can view the source, the Javascript and CSS styles are there for you to see.

Where does this work

It runs smoothly on Firefox 4, Google Chrome 10 and Apple Safari 5.0.4. It runs well on Opera 11 with some stuttering/lag. It runs smoothly on Mobile Safari (iOS4) but stutters heavily on Mobile Firefox 4 (Nokia n900 hardware issue?). It does not run at all on the Maemo web browser.

While the demo does not work in Internet Explorer 9 (no support for Transitions at this time), there is a single example of a box with a transform style applied to it. Just click “Start demo” to see it.

About gopha

Gopha is a web programmer, techie and heir to several Nigerian fortunes. In his spare time he likes to game, spend time with his wife, daughters and dogs. He eats [far too much], watches TV and lift weights. He also like to take moonlit walks on the beach and sing songs next to a roaring campfire, in a white sweater with his acoustic guitar. View all posts by gopha

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: