Advanced CSS3 Transition Effects

This entry is part 4 of 4 in the series CSS3 Transitions

CSS3 Transitions

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!

CSS3 Transitions

<< CSS3 Transition Property Basics

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • Kilian Stinson

    Didn’t know it’s possible to apply different durations and timing-functions for each property. Thanks for this :-)

  • http://habibhadi.com Hadi

    That’s great! timing :D Thanks for sharing.

    BR
    Hadi

  • http://www.varadesigns.com/ Steefenhak

    That was a good one.!

  • http://inlandbonsai.com Hal Allert

    Could this technique be used for a page of photos or would it be better to use a different technique? I like what you did with the first example.

    • http://www.optimalworks.net/ Craig Buckler

      Yes, both techniques can be used to apply affects to images. Try it!

  • Sandra

    Excellent series!

  • mahsa

    thanks for sharing :)

  • http://www.eyelikeunique.com Wilko

    Brilliant and well-written guide into CSS3 transitions. I am geeking out over the Bezier Timing functions, which arguably I’d have not found for a while if not for your article.

    Many thanks :)

    • http://www.optimalworks.net/ Craig Buckler

      Thanks Wilko.
      Stay tuned for a CSS3 Animations series coming soon…

  • http://svas.no Tor Stokkan

    Thanks, but i would be more educational if you included live examples….

    • http://www.optimalworks.net/ Craig Buckler

      I think you may have missed both demonstration links?…

  • http://www.dezinevalley.com shahzaib khatri

    I spent some time looking at the above CSS3 transition effects. These are easy to follow. Thanks Buckler!