css3-logo
Coding - CSS3

Using CSS3 Transitions

With CSS3 declarations you can add animated effects to your Web pages without relying on third-party technologies. You can define transition rules to determine how an element should change appearance, for example when the user hovers their mouse over it. By combining transition rules with CSS3 transforms, you can increase the level of complexity in these interactive effects. In this tutorial we will try out the essential features of CSS3 transitions.

Create a Web Page

Start by creating the following Web page, with a style section for CSS in the page head and a heading element containing some dummy text in the body section:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body, html {font-family:sans-serif; background-color:#FFFF99;}
</style>
</head>
<body>
<div>
<h1>Lovely Transitions</h1>
</div>
</body>
</html>

The style section contains some initial styling for the page. We will use the transition and some transforms to change the way the heading element appears when the user hovers their mouse over it.

You can apply transitions to changes in element appearance when particular events occur, detecting these events in JavaScript – we will just use the :hover selector in this tutorial for simplicity.

Apply Initial Styling

Let’s give the heading initial style properties. Add the following to your style section:

h1 {
padding:1%;
background-color:#330000;
color:#330000;
}

Notice that we color the heading text to match the background – this means that initially the text will be invisible against its background, we will make it appear when the mouse is hovered over it.

Add Hover Styling

Now let’s alter the heading appearance when the user hovers the mouse over it:

h1:hover{
background-color:#FFFF33;
}

Save and open your page in the browser – when you hover over the heading you should see the text appear because the background color changes.

css-transitions-init

css-transitions-hover

As you can see, the change occurs instantly when you move the mouse on and off the element.

Transition the Change

Adding a transition will let us control the change from the heading’s initial style to its hover style, slowing it down and configuring the way that the change unfolds. Extend your style code as follows:

h1 {
padding:1%;
background-color:#330000;
color:#330000;
/*transition properties*/
transition:3s;
}

This will make the transition last three seconds. The browser will make the change happen continuously over this period of time, so the color will change gradually as the three seconds elapses. If at any time you move the mouse off the element, the transition will begin to reverse.

One of the advantages to implementing effects such as transitions using CSS code (for example rather than in Flash), is that the most recent browsers can interpret your declarations and calculate what the appearance of your elements should be between the transition start and end points. Of course using CSS code also keeps your pages accessible to users, without relying on any third-party technologies, for example people using mobile devices.

You will also need to add the prefixed version for WebKit browsers:

h1 {
padding:1%;
background-color:#330000;
color:#330000;
/*transition properties*/
-webkit-transition:3s;
transition:3s;
}

Save your page and open it in the browser again. This time the color change on hover should take three seconds. As we add more detail to the transition, notice that the effects are also applied in reverse when the mouse moves off the element.

css-transitions-mid

The transition declaration in this case only specifies the duration, but you can specify multiple transition properties and can set them on particular style properties. For example, if you were changing both the element width and the background color style properties, you could set the transition as follows:

transition:background-color 3s, width 2s;

This would make the width change happen faster than the background color change. Other transition properties include timing function and delay. You can set the transition properties in separate lines or can combine them into the shorthand form:

/*separate version*/
transition-property:all;
transition-duration:3s;
transition-timing-function:ease-out;
/*shorthand*/
transition:all 3s ease-out;

Here we set the transition on all styling properties being changed, provide a duration and a timing function. You can choose from a variety of easing functions. Add the shorthand version to your page, including the WebKit prefixed line:

h1 {
padding:1%;
background-color:#330000;
color:#330000;
-webkit-transition:all 3s ease-out;
transition:all 3s ease-out;
}

Add Transforms

Let’s combine the transition code we added with another CSS3 feature: transforms. Start by adding a translate transform to your initial heading style:

h1 {
padding:1%;
background-color:#330000;
color:#330000;
-webkit-transition:all 3s ease-out;
transition:all 3s ease-out;
/*transforms*/
-webkit-transform:translate(-95%);
transform:translate(-95%);
}

The heading will start off to the left of the page. Now add to the hover section:

h1:hover{
background-color:#FFFF33;
-webkit-transform:translate(0);
transform:translate(0);
}

On hover, the element will slide into the page from the left. Save and open your page in the browser again – you should see the heading edge at the left side of the page, and it should move to the right when you hover over it.

css-transitions-translate-init

css-transitions-translate

Let’s enhance things a little more by adding another transform – this time we will also skew the element:

h1 {
padding:1%;
background-color:#330000;
color:#330000;
-webkit-transition:all 3s ease-out;
transition:all 3s ease-out;
/*additional skew transform*/
-webkit-transform:translate(-95%) skewX(30deg);
transform:translate(-95%) skewX(30deg);
}
h1:hover{
background-color:#FFFF33;
/*additional skew transform*/
transform:translate(0) skewX(0deg);
-webkit-transform:translate(0) skewX(0deg);
}

Save and load your page again. As you will see, the element is skewed along the X axis at first, then straightens up when the user hovers the mouse over it.

css-transitions-skew-init

css-transitions-skew-mid

You can enhance the example we built in this tutorial in various ways to explore the possibilities. For example, we made the transition take place on hover using the CSS selector, but you could implement a transition in many other ways. For example, you could detect a user event (such as the onmouseover event) on the element and change its class attribute when that event occurs. By including the altered CSS properties in the new class rather than in the :hover section as above, you would achieve the same effect. This lets you create these effects as responses for many different types of user interaction with your page elements, giving you a fine detailed level of control over the experience your users have.

Conclusion

In this tutorial we have explored some of the ways in which you can use transitions in your Web pages, such as using them in conjunction with transforms. Try experimenting with the different CSS properties you can apply the transition property to, as well as the variety of transforms in CSS3. As an advanced topic, you can also use JavaScript to respond to the end of a transition by listening for the transitionend event. As always, make sure you test your pages in a variety of browsers and provide support for users with no browser support for the CSS3 properties.

About the author

I'm a developer and technical writer - see benormal.info for details. Follow me on Twitter @BrainDeadAir or email me at sue@benormal.info.

Share this post

Leave a Comment

Subscribe To Our Newsletter