Identify Design
100% Giraffe Approved
Tutorial Preview Avatar

Welcome to CSS Transitions

Avatar of Woody

by

Sunday May 13th, 2012 in CSS Tutorials

One of the most exciting stylesheet properties in the quest for beautiful web pages is the transition tag. Transitions allow us to apply effects between two different classes which in turn allows us to create some jaw dropping incredible effects without any form of scripting. In this tutorial we're going to go over transitions, how they work, how to get the most out of them and then share some examples of exceptional transition effects from around the web.
Before we begin take a quick look at our demo page: Eight Creative Uses of the CSS Transition Property to familiarise yourself with the kind of effect transitions can create without the use of any jQuery.

Our CSS3 Transition Glossary Entry covers most of the specifics about transitions but let's give an overview here just in case. A transition is the name given to a subtle or smooth change between one stylesheet class and another. Think of an ordinary link as two stylesheet properties: the base link that users see on the page and the hover properties that determine how the link looks when users hover over it. We don't need to add a new class for the transition effect to work. We simply add the transition to the link properties and tell the browser what we'd like the transition to apply to.

If a link is blue but turns black when a user hovers over it, adding a transition on the color of the link will make the blue fade to black over however many seconds we specify.

Transitions are added using the transition property:

transition: target duration effect

We pick what we'd like to add a transition to by using the same tags used elsewhere in the stylesheet. For example to target color we use the color in place of 'target' above. After this we specify a duration for the transition in seconds. You can set this as high or low as you like and use decimal points for precise timing. The effect is optional and determines the behaviour of the transition; more on that later.

Here's an example transition to make the color change take a second:

transition: color 1s;

Easy! Of course it's never this simple. Transition is a fairly new property which means we need to use browser calls as only the most modern browsers support the direct declaration. To do this simply add the relevant prefixes:

transition: color 1s;
-webkit-transition: color 1s;
-moz-transition: color 1s;
-o-transition: color 1s;
-ms-transition: color 1s;

Even though Internet Explorer currently does not support transitions we still add -ms- above - this will save us the hassle of going back to our code when Internet Explorer starts supporting transitions.

Some of the effects we can achieve using transitions are incredible. Effects that previously required jQuery can be performed simply and cleanly as well as many creative effects that were fiddly even with jQuery. Whilst we're not going to be so bold as to say transitions should replace jQuery, we're going to say they certainly could. As always, a quick word on browser support:

Browser Support

Many developers are shy of some of the new stylesheet properties due to a well documented lack of support in older browsers. Whilst this is the case for most new methods of styling our pages transitions are unique for one reason: they are one of the few properties that degrade perfectly. In the event the user does not have browser support for transitions they'll see the hover effect without the transition, essentially seeing no change. This is because the transition is added to the existing property and doesn't overwrite anything. Older browsers that can't read transition simply ignore them and process the page as if they weren't there.

A Summary of CSS Transitions

Our First Transition

Let's get stuck into examples so we're completely sure we understand how a transition works. Below is the source code for a simple hover effect on a link. When the user hovers over the link it becomes red. When the user hovers off, it goes back to black. Quite a simple effect that is widely used:

<style type="text/css">

a{
color: #000000
}
a:hover{
color: #ff0000
}

</style>

Hi! I change Colour!

Nothing special about this link. It will function in an identical manner in every browser. Now let's add a transition effect and see how it behaves in the mainstream browsers. We're going to add a transition that makes the colour change fade in over a second. In the event the user isn't using a browser that supports a transition you should see the same link in the first example.

<style type="text/css">

a{
color: #000000
-webkit-transition: color 1s ease-in-out;
-moz-transition: color 1s ease-in-out;
-o-transition: color 1s ease-in-out;
-ms-transition: color 1s ease-in-out;
transition: color 1s ease-in-out
}
a:hover{
color: #ff0000
}

</style>

Hi! I change Colour and fade in!

When we apply a transition to an element we always apply it to the base. That is, so that both classes and states inherit the transition style. In our example this means applying the transition to the base link so that the base and the hover inherit the transition. If we don't do this then the link, or whatever object we're applying the transition to, will only show the animation fading in:

Hi! I change Colour and fade in, but I don't fade out!

The best part about these links is, in the event the browser doesn't support transitions, they still function as you'd expect. When hovering over they change colour. This is because, as previously explained, transition effects are additive. They do not replace or alter any of the initial states of our link. They're added between the two states. In the event a browser doesn't support transitions then no negative or positive effects apply.

This means, as developers, we can apply as many and as fancy transition effects as we like. That's because anyone that doesn't support them will still get basic functionality! Transitions is one of the few CSS styles where we don't need to perform backwards compatibility.

Playing with various effects we can produce some stunning results. In the next part of the tutorial we're going to look at the various examples in a page I produced a few days ago to showcase transitions to a friend. Eight Examples of Scriptless Animation with CSS Transitions. Scroll through the eight examples to see the kind of creative results you can produce with transitions. Before we look at each example and how to achieve it let's discuss the practical situation to use transitions.

Why should I Replace jQuery?

After looking at the example page you'll see there's plenty we can do with transitions that we'd normally use jQuery for. On that page there is zero jQuery (except for the jQuery that makes the mouse wheel scroll horizontally) and all the animated effects are managed with transitions.

There's one obvious reason for using transition over jQuery: people who have JavaScript disabled or scripts blocked won't see any jQuery effects. Stylesheets, on the other hand, are never blocked. This allows us as developers to bypass one of the most annoying changes in modern day web design!

In the event users don't have browser support (Internet Explorer users) we could add a conditional statement that will load a jQuery library to use in lieu of transition support like this one:

<!--[if IE]>

Load and enable your jQuery effects here.

<![endif]-->

If you're using Internet Explorer you should see 'Load and enable your jQuery effects here.' in the example box above. If you're using any other browser you won't see anything.

It could be disputed that, since we're going to the effort of adding jQuery to our elements anyway for Internet Explorer users that we might as well keep using jQuery and upgrade to transitions when Internet Explorer supports them. This is a fair point.

Less and less users are using Internet Explorer and Internet Explorer's previous dominance in web browsers was due to its pre-installation on Windows operating systems. With further exposure for Firefox, Chrome, Safari and Opera the percentage of users using Internet Explorer is visibly dropping. We can look at two websites to get a rough idea of this trend: Browsers used viewing the W3 Schools Website and StatCounter Browser Statistics Page. We'd expect the use of Chrome and Firefox to be higher on the W3 Schools website because they are more developer friendly, whereas StatCounter's statistics show the trends for viewers on all websites they provide tracking services on indicating the browser used by a far more general audience.

What you'll notice with both sets of statistics is a trend: Internet Explorer users are declining whilst the number of users of other browsers (with the exception of Firefox users, who seem to be switching to Chrome) is growing.

That said, every website is different. Identify Design has predominately Chrome and Firefox users, though our website is aimed at developers like the W3 Schools site. In our case our need to tailor to Internet Explorer users is far less than it might be on another website. The best way to decide whether to either provide a jQuery alternative for Internet Explorer users or just stick with jQuery is to look at your statistics and decide for yourself.

I personally politely request the user to download another browser as I believe it's down to Microsoft to make Internet Explorer support modern day trends. Every other browser does and increases support for new features with new updates. Internet Explorer never has and for the foreseeable future this isn't likely to change. Therefore I simply do away with the jQuery effects altogether for Internet Explorer users, though they'll still have the basic functionality of the transitions only without any animation.

Create your own Effects

Let's take a look at our Eight Creative Uses of the CSS Transition Property and see how they're made. We'll look at each example, provide the source and link to the example's slide in the example. In all our examples the ease-in-out makes the animation smoother.

Shadow

To create a shadow effect we use an image that overlays the photograph and then fade it in using a opacity property on the opacity:

img.shadow{

position:absolute;
top:0;
left:0;
opacity:0.5;
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
-ms-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out

}

img.shadow:hover{

opacity:1

}

Vibrancy

To create a vibrancy change we use the same effect as before but instead of a shadow image we use a brighter, higher contrast version of the original image. We set the opacity of the vibrancy image to zero and have it fade in to max:

img.brightness{

position:absolute;
top:0;
left:0;
opacity:0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
-ms-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out

}

img.brightness:hover{

opacity:1

}

Blur to Focus

To make a blurry image sharpen we use the same hover effect as before only this time we swap the images around. Our base image is a blurry image and the image we fade in is the sharp, proper version of the image:

img.sharp{

position:absolute;
top:0;
left:0;
opacity:0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
-ms-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out

}

img.sharp:hover{

opacity:1

}

Directional Scroll

By adding a transition to the left positioning property we can make our image scroll in from the left when the user hovers. We achieve this by positioning our second image outside of the wrapper, hiding the overflow, and then moving the image's position when the user hovers:

div.wrapper{

overflow:hidden;
position:relative;

}

img.left{

position:absolute;
top:0;
left:-100%;
-webkit-transition: left 0.5s ease-in-out;
-moz-transition: left 0.5s ease-in-out;
-o-transition: left 0.5s ease-in-out;
-ms-transition: left 0.5s ease-in-out;
transition: left 0.5s ease-in-out

}

img.left:hover{

left:0;

}

Diagonal Directional Scroll

By adding a top transition to the above example we can make the scroll diagonal from one of the corners. In the example we position the second image in the top left corner of the wrapper and add a transition to both the left and top properties:

div.wrapper{

overflow:hidden;
position:relative;

}

img.diagonal{

position:absolute;
top:-100%;
left:-100%;
-webkit-transition: left 0.5s,top 0.5s ease-in-out;
-moz-transition: left 0.5s,top 0.5s ease-in-out;
-o-transition: left 0.5s,top 0.5s ease-in-out;
-ms-transition: left 0.5s,top 0.5s ease-in-out;
transition: left 0.5s,top 0.5s ease-in-out

}

img.diagonal:hover{

left:0;
top:0;

}

Pixelation

By using the same opacity transition as before we can create a pixelation effect. The original image should be pixelated and the image that fades in should be a sharp image, much like example three which uses a blurry image as the base.

img.sharp{

position:absolute;
top:0;
left:0;
opacity:0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
-ms-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out

}

img.sharp:hover{

opacity:1

}

Zoom In or Out

By combining a width and height to the scrolling example that used left and top, we can create an excellent zoom effect as outlined in example seven. This effect can be used in a variety of ways and you can swap the sizes to create a zoom out as well.

This part requires a small amount of maths for the best effect. You want to figure out how much of the image will be hidden when zoomed out. Divide this in half and place the zoomed out image this far outside of the wrapper. You can't use percentages here which is the only downsize (you could, but the zoom won't be perfectly from the middle of the image.)

For example if your image is 300x300 and the wrapper the user hovers over is 100x100, you have 200 pixels to move the zoom effect around with. To centre the zoom you'd position it -100 to the left and -100 to the top. Upon hovering you want to make the image position itself in the middle and resize itself to the width and height of the wrapper:

div.wrapper img.zoom{

position:absolute;
top:-100px;
left:-100px;
width:300px;
height:300px;
-webkit-transition: top 1s,left 1s,width 1s,height 1s ease-in-out;
-moz-transition: top 1s,left 1s,width 1s,height 1s ease-in-out;
-o-transition: top 1s,left 1s,width 1s,height 1s ease-in-out;
-ms-transition: top 1s,left 1s,width 1s,height 1s ease-in-out;
transition: top 1s,left 1s,width 1s,height 1s ease-in-out

}

div.wrapper:hover img.zoom{

top:0;
left:0;
width:100px;
height:100px;

}

Conclusion

Transitions give us the freedom to be creative and work to our imagination's limit and not the limitations that script blockers and users dictate. With this in mind, replacing jQuery with transitions really is an upgrade all developers should be looking into. As demonstrated on our example page: Eight Creative Uses of the CSS Transition Property, some basic uses can produce fabulous results and a combination of various transitions can produce some stunning results all without the use of any form of scripting!

If you would like your page to be added as an example of quality transition work please leave a comment below and we'll add it in time for the benefit of all our readers.

Leave a reply

You must be logged in to post a comment.