How do they work?

The animation and transition tags are summary properties, composed of all the various options you can apply to an animation or transition. They are largely to do with the movement of objects or setting a transition phase to make things appear to be more smooth. Across the internet a wide variety of examples have been composed showing the capabilities that CSS3 and these properties bring to the table.

The Difference

The main difference between an animation and a transition is a transition can only change from one element to another on hover or when an element becomes active, i.e. through a pseudo class. Animations can be initiated from the page loads without any user interaction, but can still be mixed in with user interaction. Both have their own benefits, and are useful in their own unique situations. More complex effects will however require animations, which in turn require keyframes, the syntax of animations.

Support

These features are rather popular, and as such the major browsers have all incorporated experimental support. Opera being the exception, not supporting animation but supporting transitions.

Webkit

Gecko

Trident

Presto

Transition Properties

Experimental

Experimental

Experimental

Experimental

Animation Properties

Experimental

Experimental

Experimental

Unsupported

Animations

MAIN SYNTAX

Multiple animations are separated by commas. Instead of doing each bit individually, you can do it all at once with the main syntax. Just stick the different parts into animation like below.

The CSS you put in the 0% bracket will happen immediately as soon as the animation is initiated. The 100% animation is what will happen right at the end. 0% and 100% aren’t required though, you could very easily use 50% { for what happens half way through, or even 46% {. Heck, you don’t even need 2 frames! As you can probably tell, this gives us a lot of flexibility!

However, because of browser compatibility and the fact that these features are still experimental, we need to add browser extensions to the start of each CSS tag. So for example, since animations are supported by Webkit, Firefox and Internet Explorer (platform preview), we write it more like this:

Notice how we’ve added -moz-, -webkit- and -ms- to the start of the keyframes property. Everything else can be filled in, but remember you’ll have to fill it in multiple times (for now anyway, until it’s totally supported).

After we make up our animation like above, we have to decide what we’re applying it to. So after you’ve added a bunch of styles to the keyframes, pick the div or span you wish to apply the animation to. As mentioned before, there are a bunch of options that help you have more precise control over how the animation works.

As we did earlier, we set a name for the keyframes. So to apply the animation to you need to set 2 animation properties. These are animation-name and animation-duration. As a side note, because (again) browser support is still in the experimental stage, we have to add -moz-, -webkit- or -ms- to the start. So it’s going to look a little something like this:

Which direction the animation should proceed in. You can make it play normally with the keyword normal or in alternates (using the keyword alternate) as in it goes forward the first time, it goes backwards the second time, then it goes forward the third time, and so on.

Sets the finishing setting. For example, if you set this to forwards then whatever you defined as the last keyframe. will be what happens at the end of the animation (assuming it doesn’t repeat infinitely). If you set this to backwards then whatever you set as your first keyframe will be how it ends. This is useful for animated hover over effects.

Summary Example

As a summary, here’s an example of an animation. In this animation, as soon as the page loads every div will develop a red background over 10 seconds, and stay red until the user refreshes or leaves the page.

Multiple transitions are defined with commas. Transitions are much more limited than animations. A transition has to take place between two psuedo classes, so for example, a transition is usually set in the main class. So for example, we might have a set of stuff like this:

So there are two things you have to define for a transition to work. These being the time and the property you wish to apply the transition to. Generally I apply them in the overall transition tag but we’ll go through them individually, so you can understand!

We still have to add browser specific tags to the start of each property since this stuff is experimental. Don’t forget, Opera supports this feature too! The transition-property is the property which you want to transpire. For example, if you want something fluidly to the left, you would set you’d Alternatively you can say ‘all’ which transitions all properties applied to pseudo elements. In short its the CSS property you want to transit.

-webkit-transition-property: left; /* So it would possibly slide to the right */
-moz-transition-property: left;
-ms-transition-property: left;
-o-transition-property: left;