CSS Transitions: Delays and Multiple Properties

mykola bilokonsky

CSS

Learn how to spice up your CSS Transitions using delays and compound transition rules that specify independently varying rules for transitions to multiple properties on the same object.

We've got this wombat revealer working for our client, The World Wombat Federation. Every time you click it fades out the cover and shows you the wombat. When you click again, the cover fades back in.

We're doing that by applying the transition property to the opacity property at 500 milliseconds. On click we're appending this open class which sets opacity to zero. As a result, when we click opacity starts going from one to zero over half a second. That's how we get that nice, graceful fade. There's a couple more things we can do with CSS transitions.

When the client comes back to us and says, "You know, this is great, but the wombat is a playful creature. We'd like to tease our audience a little bit. When they click, we don't want it to transition right away. We want it to wait just a little bit so they think maybe they didn't click and maybe nothing is going to happen and then surprise them with a transition. Can we do that?"

You're thinking, "Yeah, no problem," because with CSS transitions, if I add another value here -- so this is the property, this is the duration -- a second number here is optional. It's the delay. Now when I click it waits 200 milliseconds, and then it transitions.

We show this to the client, and of course they love this as well, but they say, "All right, smart ass, can we do a little bit better? What about, if it's so easy for you to add these transitions, we'd also like to see this kind of spiral out of control to represent the chaos of the wombat-lover's life." I'm really stretching this analogy here. I'm sorry.

" We'd like to add a transform so that, when you click it, not only does it fade out, we want it to kind of spin out. Can you do that?" You think, "Yeah, no problem." First of all, we know that we can use a CSS transform -- let's see if I got this right -- to apply the rotation.

You can't really see it there because it's not being animated, but if you look this upper left becomes the lower right as it translates out. We've got our translation, but it's not animated. Currently we're transitioning opacity. Can we also transition the transform? Absolutely, because this takes a comma-separated list.

We've got opacity transitioning over 500 milliseconds delayed by 200 milliseconds. Let's also do transform over 500 milliseconds delayed by 200 milliseconds. What I'd like you to take away from this is that this is really just this metarule.

This is saying, "Look, anytime opacity changes, I want you to use this logic to interpolate that change. Anytime transform changes, I want you to use this logic to interpolate that change." We can do multiple transition properties at once, and each of them can have independently varying durations and transitions.

We can see now, when we click this, that rotates out the way we expect, but we also don't have to have our same delay on that. This will just start to transform right away, but the opacity fade still waits 200 milliseconds. Now we've got that little staggered effect.

CSS Transitions: Delays and Multiple Properties

You must be a Pro Member to view code