Get Started With CSS3 Transitions Today

Transitions (basic animations) are one of the most popular additions in CSS3, and one of the easiest to implement for big gains on your site.

A transition is simply an animation from one set of CSS properties to another. So for example; whilst before you may have had links with blue text, which suddenly turned orange when you hovered on them, you would now replace that sudden jump with a more graceful animation.

In this post, we’ll look at the basic syntax, step through some examples, and finally take a brief look at current browser support.

Syntax

The process is very simple. Let’s say you wanted to set up the blue->orange link example:

1. Setup CSS for the link to be blue.
2. Setup CSS for the link to be orange.
3. Add a transition.

The end result would be something like this (Don’t worry about the transition syntax right now. I just want to show you how little code this really is):

1 2 3 4 5 6 7 8 9 10 11 12

a:link, a:visited {   color: blue;     -webkit-transition:  color 0.5s;   -moz-transition:     color 0.5s;   -o-transition:       color 0.5s;   transition:          color 0.5s; }   a:hover, a:active {   color: orange; }

Now, let’s look at the syntax. The first thing to point out is that as in the example above, you will need to use browser prefixes (-o- for Opera, -moz- for Firefox etc.). This is a nuisance, but a minor one as the actual values you give to each one are identical at least.

The transition property takes up to 4 arguments:

• Property to animate – You can see a list of all supported properties here.
• Length of transition.
• Delay before starting.
• Easing. We’ll look at this more in a minute, but think of it as the “style” of animation.

So now looking back at the first example, you can see that I specified to animate the color property for 0.5 seconds. The browser then defaulted the delay to 0 (i.e. start immediately), and used its default easing.

Now let’s look at a few more examples of this in use. For each one, I’ll put the code here, and you can see the demo on this page.

1 – A Simple Fade

View Demo

1 2 3 4 5 6 7 8 9 10 11 12

a.fade {   background: #0068b8;     -webkit-transition:  background-color 0.8s;   -moz-transition:     background-color 0.8s;   -o-transition:       background-color 0.8s;   transition:          background-color 0.8s; }   a.fade:hover, a.fade:active {   background-color: #05406d; }

2 – Slide Left and Right

View Demo

I use some JavaScript first in this example, to add/remove slide-left and slide-right classes to the link.[1]

1 2 3 4 5 6 7 8 9 10 11

$  ('.slide').on('click', function() {   slideLeftRight($  (this)); });   function slideLeftRight(ele) {   if(ele.hasClass('slide-left')) {     ele.removeClass('slide-left').addClass('slide-right');   } else {     ele.removeClass('slide-right').addClass('slide-left');   } }

The CSS is just as simple as before though:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

a.slide {   position: relative;   -webkit-transition:  left 1.5s;   -moz-transition:     left 1.5s;   -o-transition:       left 1.5s;   transition:          left 1.5s; }   a.slide-left {   left: 0; }   a.slide-right {   left: 580px; }

3 – Multiple Properties at Once (Zooming)

View Demo

In the previous examples, we have always specified a particular property to animate. You don’t have to do it this way though. Instead, you can specify a comma-separated list of properties, or better yet, type all, and the browser will animate anything it can.

In this example, we use the all keyword to animate the width, height and line-height all at once.

1 2 3 4 5 6 7 8 9 10 11 12

a.zoom {   -webkit-transition:  all 0.8s;   -moz-transition:     all 0.8s;   -o-transition:       all 0.8s;   transition:          all 0.8s; }   a.zoom:hover, a.zoom:active {   width: 200px;   height: 50px;   line-height: 50px; }

4 – Stretch Search Box on Focus

View Demo

The last example is to enlarge the search box for typing when a user clicks into it. This effect has become increasingly popular since being included in the TwentyEleven default theme.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

.search-field {   width: 108px;   border: 1px solid #ccc;   background: #f5f5f5;   padding: 5px;     -webkit-transition:  width 0.8s;   -moz-transition:     width 0.8s;   -o-transition:       width 0.8s;   transition:          width 0.8s; }   .search-field:focus {   width: 200px; }

Easing

Now, let’s return to the easing property, as it can be very powerful. Earlier, I said it is like the style of the animation, which is true. More specifically though, it controls your rate of animating.

Consider an animation which moves an object from left to right. It could make the entire animation at the same pace (e.g. it moves 100px every 0.2 seconds, whether it’s the first 0.2 or the last), or it could accelerate rapidly at the start and slow towards the end, or start off slow and pick up speed as it goes.

There are a lot of possibilities, but the easiest way to understand them is to see them in action. The last example I’ve put together uses the slide left/right animation again, but with a different easing option on each button.

View Demo

Click the “click here” link under section 5 of the examples, and you will see the 5 buttons animate. All of them use the same animation, for the same length of time, but with the easing function labelled on their button.

You can specify this with your other properties, e.g.

1

transition:          left 1.5s ease-out;

A more flexible approach however can be to use extra CSS classes, e.g.

1 2 3 4 5 6 7 8 9 10 11 12 13

a.ease-in {   -webkit-transition-timing-function:  ease-in;   -moz-transition-timing-function:     ease-in;   -o-transition-timing-function:       ease-in;   transition-timing-function:          ease-in; }   a.ease-out {   -webkit-transition-timing-function:  ease-out;   -moz-transition-timing-function:     ease-out;   -o-transition-timing-function:       ease-out;   transition-timing-function:          ease-out; }

Now to change any animated elements easing, I simply give it the ease-in or ease-out CSS classes.

Browser Support

Browser support for CSS transitions these days is great! Chrome has supported it from version 1.0, Firefox from version 4.0, Safari from 3.2, and Opera from 10.5.[2]

As you would expect though, Internet Explorer is lagging behind. They are fully supported in IE10 (And without any vendor prefix, which is a nice touch), but not in any previous version. Given that IE10 currently only runs on Windows 8, this means it will be a long time before the majority of IE users see your transitions.

Still, don’t let that stop you. The other browsers have great support for these, they’re an extremely simple upgrade to make to your site, and it all degrades gracefully for IE users anyway, so there’s no real loss!

Pro Blog Design

[plinker]