CSS3 Transitions 101: What are Transitions?

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

CSS3 Transitions

Transitions are the most-used type of CSS3 animation. Despite widespread adoption and a relatively simple syntax, there are several gotchas and options of which even the most knowledgeable developers are blissfully unaware!

This is the first in a four-part series about CSS3 transitions but each article can be read individually or out of order. Let’s start with the basics…

Animation == Behavior == JavaScript?

One of the arguments against CSS3 transitions is that it’s behavioral and trespasses on JavaScript territory. That’s absolutely true … but CSS has been doing it for many, many years.

When I started web development in the mid 1990s, neither CSS or JavaScript existed. One of my first projects was to implement a mouse-over hover effect for some icons — using Java in a pre-compiled applet. It was several days effort.

Within a year, JavaScript made hover-over effects immeasurably easier and every developer littered their HTML with inline handers such as onmouseover="changeColor();" onmouseout="changeColorBack();".

Shortly after that, CSS introduced dynamic pseudo-classes such as :hover, :active and :focus. We could separate stylesheets from our HTML and implement basic effects within seconds. Would you really want to return to the JavaScript days?

CSS3 Transitions build on existing CSS techniques. They don’t offer the frame-by-frame control available to JavaScript but you rarely need fine-grained animations for simple page widgets such as pop-ups and menus. While I admit to some initial skepticism, the CSS3 animation genie is out of the bottle and you’ll never put it back in.

The Benefits of CSS3

While there are still cases for JavaScript animation, you should normally use CSS3 when you can:

  1. CSS3 transitions are natively handled by the browser. They will always be faster than a comparable JavaScript animation.
  2. JavaScript animation is undoubtedly more difficult. Consider the mathematical complexities of implementing natural-looking acceleration and deceleration — even if you know the equations, you’ll require several lines of code and some rigorous testing. In CSS3 it can be handled with one property.
  3. Some effects would be impractical in JavaScript alone, e.g. rotating an element in two or three dimensions.

So What is a Transition?

A transition is the simplest form of CSS3 animation; it defines an effect which is triggered between two states.

States
A transition requires a starting point (the initial state) and an ending point (the active state). For example, we could have an element which starts absolutely positioned at 0px and is colored blue and ends at 100px and is colored red. A CSS3 transition could smoothly animate between those two states without you needing to define the individual frames.

Triggers
The transition must be triggered in some way to start the animated effect which ultimately reaches the end state. This can be done in CSS alone using a pseudo selectors such as :hover or :focus. You could also trigger the animation by changing one or more of the element’s style properties in JavaScript.

CSS2.1 Transition Example

Let’s look at a very simple effect we can create in CSS2.1:
View the CSS2.1 demonstration page…

Hover over the white block and the child element will move.

Our HTML has a container block and a paragraph element:

<div id="container">
	<p>I will be animated</p>
</div>

The container has a few styles and is relatively positioned:

#container
{
	position: relative;
	width: 600px;
	height: 400px;
	background-color: #fff;
	border: 2px solid #000;
	margin: 1em auto;
}

The paragraph is sized and positioned at the top left of the container:

#container p
{
	position: absolute;
	left: 0;
	top: 0;
	width: 100px;
	height: 70px;
	font-size: 1em;
	font-weight: bold;
	text-align: center;
	padding-top: 30px;
	background-color: #00c;
}

When we hover over the container, the paragraph is moved to the bottom right and has its color and border-radius altered:

#container:hover p
{
	left: 500px;
	top: 300px;
	background-color: #c00;
	border-radius: 50px;
}

Easy … and few developers would argue it should be handled using JavaScript!

CSS3 Transition Example

The demonstration above works well but the state transition is very abrupt. Let’s apply a little CSS3 magic…
View the CSS3 demonstration page…

Hover over the white block and you’ll see the same transition except that it’ll smoothly animate between the two states. Most would agree that it’s a far more pleasing effect. Let’s example the CSS3 code applied to the #container p selector which implements the animation:

transition: all 3s ease;

Seriously, that’s it. Twenty-five characters. Notice also that you can move the cursor off the container mid-animation and everything returns nicely. How long would it take to code a similar effect in JavaScript?

Admittedly, I also added a sneaky transform: rotate(360deg); to the :hover state which you’ll see in Firefox or IE10 — but we’ve hardly broken the project budget!

Cross-Browser Transition Support

Transitions are supported in Firefox, IE10 and Opera 12 without a prefix.

At the time of writing, the Webkit browsers including Chrome, Safari and Opera 15+ require the -webkit- prefix which should be added prior to the standard property, e.g.

-webkit-transition: all 3s ease;
transition: all 3s ease;

Unfortunately, not all browsers are created equally. Animations can get a little freaky in Opera 12. In addition, the Webkit engine vomits when it encounters the rotate transformation and gives up on some other transition effects (hence the reason for not including a -webkit-transform: rotate(360deg);). Finally, IE9 and below will fail to show any animation.

However, this rarely matters. If CSS3 transitions fail or don’t work as you expected, the start and end states will eventually be reached. In most cases, the browser will fall-back to the instant CSS2.1-like state switch.

In the next part we’ll look at the transition property in more detail and discuss what can and cannot be animated.

CSS3 Transitions

CSS3 Transitions: Bezier Timing Functions >>

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.

  • Kike

    CS3 transaction o_O… even my nephew could do it.
    Thanks.

  • http://www.dehydr8ed.com Joey Djemal

    Nice read, I agree, take CSS3 for a ride and never look back.

  • Rick

    Nice, but, until it works the same in all browsers….I think I’ll stick to JS.
    It’s more uniform in behavior.

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

      Really? It’s reasonably consistent in all the latest browsers. You’re only missing IE9 and below, but they’ll fallback. Webkit has a few odd quirks now and again but nothing major.

      • Phil

        I agree – I think the key is to use CSS transitions when they enhance the user experience but the absence of them is not critical to the site’s functionality. If it is, when we should have a javascript fallback ready.

  • http://www.purplepier.com.br Carlos Garcia

    It´s a easy way to animate things without Javascript.
    Good article, congrats!

  • Christian

    It’s a hard concept to grasp but CSS transitions are not actually behavioral. CSS just defines styles for an element in a particular state. CSS transitions just means that there is not an abrupt jump from the appearance of one state to the appearance of another state.

    • Nigel Wade

      I agree with you here, I don’t think that transitions are behavioural, merely presentational and was going to place a coment to that effect :)

  • http://www.blinks.org.uk John

    In my experience CSS3 transitions can provide incredibly smooth effects (compared to Javascript) but there is the whole issue of position: fixed; not working on the descendants of transitioned elements that can be a bit of a fiddle to work around.

    http://dev.w3.org/csswg/css-transforms/#transform-rendering

  • Mike

    More and more people are using tablets and smartphones with touch screens. Is it worth even bothering with hover events if you want to reach the largest audience?

  • http://www.lyricstaal.com Pranjal

    Thanks, absolutely looking for something like this on CSS3 animations, just now jumped on learning CSS after completing HTML…

    :)

  • http://www.wish111.com Matthew

    We have been using CSS3 techniques applied by us where in we utilize media queries to figure out the size of a device and adjust the site’s display accordingly. Working great for us and our clients.Thank you for this article..

  • Dale

    tried fiddling with the code and it was reasonably easy… until i tried to put a div inside the dic called #container…. tried for hours to get the div inside the div to animate and am giving up now…. unless someone can tell me what the css would be._

    l

    dont care if its a div id o r a div class tried both and cant get either to work… help please!!!!

    i tried

    #container :hover .orange
    and
    #container.orange :hover

    and about a million other combinations