CSS Transforms and Transitions: Practical Examples

As a continuation from the last tutorial, and because I’ve had quite a few requests, we are going to take a look at a few practical examples of CSS transitions in action. In the previous post I showed examples of what they do, but these examples show transitions in a usable manor.

N.B: Remember you’ll need a Webkit browser, Firefox 4 or Opera to view these examples.

Animated Indenting List

I’ve seen this example all over the internet for quite a while. It is usually accomplished via Javascript, but now we can create it using only CSS. Here is what it looks like:

• item 1
• item 2
• item 3
• item 4

It’s an old one, but I’ve never seen it done using the CSS transitions so I thought I’d share it. It’s actually pretty simple to do.

See it’s not that difficult. I’ve included the Mozilla properties too. This will allow Firefox 4 to see the transitions, but in Firefox 3 will the list items will just jump position rather than smoothly gliding into position.

Now let’s go through what’s going on though just in case you haven’t read my previous post and are new to transitions.

First we set up our transitions. There are a lot of browser prefixes here, but eventually you’ll just be able to drop the prefixes. Basically we say we want to transition the transform property for 0.2 seconds using ease-in-out. Ease-in-out tells it to slowly ease into the animation & then ease out again instead of moving all at one pace.

In our hover we set the transform property. In this case translate, but only on the X axis (left->right).

Animated Images

One thing I’m sure transitions will be used for is animating images in some way. You can do a little gallery, like this:

N.B: Images are © Lisa Marie Robinson & Paul Robinson under Creative Commons BY-NC-SA license.

Okay so it’s a little OTT, but it shows a practical example of transitions on images. Let’s take a look at the code I used.

Hopefully you are picking up the idea that all the transitions are created in exactly the same way. The main difference in this example is that we set the position of the images to relative & set the z-index on hover. This allows the hovered image to appear above the others. Also you can see that you can transition two different transform functions at the same time.

Animated Submit Buttons

It’s always nice to give feedback to the user such as ‘Hey, you’ve hovered over me!’, but traditional methods are either boring or require images. Let’s see what we can do with a transition.

I’m not the best at design so please forgive me if it’s a little crap. Here is the CSS that makes this work.

As you can see it’s pretty much the same as the others, but I just want to make sure you’ve got it down. An exciting thing about transitions is the fact, as you’ve just seen, you can transition between colors.

I hope these examples have helped illustrate what you might use transitions for and have given you some ideas on what you might use them for in the future. If you have any questions please let me know via the comments.

CSSTransformsTransitions