Using CSS3 Transitions to create rich effects

There has been discussions about allowing CSS to help developers create smooth transitions of CSS properties for elements, and it’s something being specified in CSS3 in W3C CSS Transitions Module Level 3. Here I’m going to show you how to implement it in Firefox, Google Chrome, Safari & Opera.

The basics

The basics relies on a few CSS properties:

transition-property
Which CSS property to animate, e.g. background-color.
transition-duration
The duration of the transition, specified in seconds, e.g. 2s
transition-delay
Delay before the transition should start, specified in seconds, e.g. 1s
transition-timing-function
The function you want to use for the appearance/easing of the transition. Five predefined values are offered: ease (the default value), linear, ease-in, ease-out and ease-in-out. You can also use cubic-bezier and define it’s values, such as cubic-bezier(0.2, 0.4, 0.7, 0.8)

First simple example

So, let’s create an element with a certain CSS transition applied to it and then use the :hover pseudo-class to change one of the CSS properties we want a transition for. Here we will have a transition for the element’s opacity, going from the value 0.3 to 1.0, after 1 second of being hovered:

<style>
	#hello {
		opacity: 0.3;
		/* Firefox */
		-moz-transition-property: opacity;
		-moz-transition-duration: 2s;
		-moz-transition-delay: 1s;
		/* WebKit */
		-webkit-transition-property: opacity;
		-webkit-transition-duration: 2s;
		-webkit-transition-delay: 1s;
		/* Opera */
		-o-transition-property: opacity;
		-o-transition-duration: 2s;
		-o-transition-delay: 1s;
		/* Standard */
		transition-property: opacity;
		transition-duration: 2s;
		transition-delay: 1s;
	}
	
	#hello:hover {
		opacity: 1;
	}
</style>

<p id="hello">Hello, CSS lover!</p>

Note the syntax with various web browser prefixes to make it work in all of them. As of this writing, none of them supports it without the prefix, but you should still have it in there for future reference.

Using shorthand syntax

Just as with most CSS properties, naturally CSS Transitions offers a shorthand syntax as well. The CSS for the above example, with shorthand syntax, would look like this:

<style>
	/* Shorthand version */
	#hello {
		opacity: 0.3;
		/* Firefox */
		-moz-transition: opacity 2s ease 1s;
		/* WebKit */
		-webkit-transition: opacity 2s ease 1s;
		/* Opera */
		-o-transition: opacity 2s ease 1s;
		/* Standard */
		transition: opacity 2s ease 1s;
	}
</style>

Specifying multiple CSS Transitions

It is very simple to use multiple transition options for a CSS Transition, just specify each comma-separated. In this example, both the opacity and height property will be transitioned:

<style>
	/* Shorthand version */
	#hello {
		height: 20px;
		opacity: 0.3;
		/* Firefox */
		-moz-transition: height 1s ease-out, opacity 1s ease;
		/* WebKit */
		-webkit-transition: height 1s ease-out, opacity 1s ease;
		/* Opera */
		-o-transition: height 1s ease-out, opacity 1s ease;
		/* Standard */
		transition: height 1s ease-out, opacity 1s ease;
	}
	
	#hello:hover {
		height: 40px;
		opacity: 1;
	}
</style>

You can see this example live in the CSS3 Transitions example.

Using CSS Transitions and CSS Transforms

CSS Transforms offers you the possibility to scale, rotate, reposition and skew an element through CSS. We can now combine this with CSS Transitions to create a nice example that will both scale and rotate an element when hovered (it utilizes the all keyword for the transition property value, which at this time is not available in Firefox):

<style>
	/* Shorthand version */
	/* Shorthand version */
	.menu-item {
		opacity: 0.3;
		
		/* Firefox */
		-moz-transition: all 1s ease;
		/* WebKit */
		-webkit-transition: all 1s ease;
		/* Opera */
		-o-transition: all 1s ease;
		/* Standard */
		transition: all 1s ease;
	}
	
	.menu-item:hover {
		opacity: 1;
		
		/* Firefox */
		-moz-transform: scale(2) rotate(30deg) translate(50px);
		/* WebKit */
		-webkit-transform: scale(1.2) rotate(30deg) translate(50px);
		/* Opera */
		-o-transform: scale(2) rotate(30deg) translate(50px);
		/* Standard */
		transform: scale(2) rotate(30deg) translate(50px);
	}
</style>

<a href="/" class="menu-item">Menu item 1</a>
<a href="/" class="menu-item">Menu item 2</a>
<a href="/" class="menu-item">Menu item 3</a>

This example can be viewed/tested in the CSS Transitions with rotation example.

Web browser support

CSS Transitions work in these web browsers:

  • Firefox 3.7 (upcoming this spring/summer – nightly builds available at http://nightly.mozilla.org/)
  • Google Chrome 4.0+
  • Safari 3.1+
  • Opera 10.5+

Not available in any version of Internet Explorer, and no indication so far that it will be in IE9.

Thoughts

From testing this, I had a few thoughts:

  • Firefox lacks support for the all option, and also works a bit flimsy (test the demo for rotation and you will see).
  • WebKit-based web browsers (Safari and Google Chrome) offer the most smooth animations.
  • Opera seems to have issues with the font when something is rotated.

29 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.