Advanced CSS3 Transition Effects

In the final part of this series about CSS3 transitions, we’ll examine a couple of more advanced transition topics.

Alternative Reversing Transitions

In our previous examples, we’ve applied a single transition property which is used when changing from the start to the end (hovered) state and reversing from the end to the start state, e.g.

p#animate
{
	color: #ff6;
	transition: all 3s ease-in-out 0.5s;
}

p#animate:hover
{
	color: #0f0;
	transform: scale(4);
}

(Note that -webkit prefixes are not shown but are currently required for transition and transform.)

In this example, when you hover over the element for at least 0.5 seconds, it will grow to 4x its size and change color over three seconds. When you move the cursor off the element, it will wait for another 0.5 seconds then return to its starting state over three seconds too.

But what if we wanted the element to snap back immediately? Fortunately, we can apply two differing transitions; one for the animation between the start and end state, and one for the reversing animation between the end and start state:

p#animate
{
	color: #ff6;
	transition: all 0.5s ease-in-out;
}

p#animate:hover
{
	color: #0f0;
	transform: scale(4);
	transition: all 3s ease-in-out 0.5s;
}

View the transition reversing demonstration page…

This illustrates an element which grows to the end state slowly but returns to the start state quickly. You should note that the transition property is applied to the state it’s moving toward. Therefore, our :hover (end) state has the three second duration, but the normal (start) state has a 0.5 second duration.

Multiple Transitions

Individual CSS properties can have differing transition effects applied. This is best illustrated with an example:

p#animate
{
	width: 10em;
	background-color: #F00;
	border-radius: 5px;
	transition-property: width, border-radius, background-color;
	transition-duration: 1s, 2s, 5s;
	transition-timing-function:  ease, ease-out, linear;
}

p#animate:hover
{
	width: 20em;
	background-color: #00F;
	border-radius: 50%;
}

View the multiple transition effects demonstration page…

In essence, we have defined three separate transitions when we hover over the element:

1. the width is doubled from 10em to 20em over 1 second using the ease timing function
2. the border-radius changes from 5px to 50% over 2 seconds using the ease-out timing function, and
3. the background-color changes from red to blue over 5 seconds using the linear timing function

You’ll notice that the background color continues to change at least three seconds after the other animations have completed.

Values loop if you omit them, e.g.

p#animate
{
	transition-property: width, border-radius, background-color;
	transition-duration: 1s, 2s;
	transition-timing-function:  ease;
}

1. the width animates over 1 second using the ease timing function
2. the border-radius animates over 2 seconds using the ease timing function, and
3. the background-color animates over 1 second using the ease timing function

If you’ve followed this series, you now know almost everything there is to know about CSS3 transitions. Hopefully, you’ll devise better examples than the ones I’ve shown here!