How to use CSS3 transitions

Default avatar.
April 11, 2013
How to use CSS3 transitions.

ThumbnailEveryone loves motion. Adding the fourth dimension (time) to a site design is the main way screen-based design stands out from print design. CSS Transitions are a simple method for animating properties of an element enabling you to enrich certain events in your web design, without the need of Flash or JavaScript.

The W3C aptly describes transitions on their website as "CSS Transitions allows property changes in CSS values to occur smoothly over a specified duration". In other words, CSS transitions allow us to modify a property incrementally, creating a sensation of motion and imbuing designs with subtlety and emotion that isn't possible with a quick change.

Browser support

All modern browsers (yes even IE!) now support CSS transitions. However, importantly, if transitions aren't supported in the browser being used, the transition is ignored and the property changes will be applied instantly. This graceful degradation is a cornerstone of best practice.

In order to extend the range of browser support we can use vendor prefixes, this extends the feature to include Firefox 4–15, Opera 10.5–12 and most versions of Chrome and Safari. The code, including the vendor prefix alternatives looks like this:

div {
-o-transition: all 1s ease;
-moz-transition: all 1s ease;
-webkit-transition: all 1s ease;
transition: all 1s ease;
}

The non-prefixed property is added at the bottom of the stack to ensure final implemantation will trump all the others, as the property moves from draft to finished status.

Transition parameters

There are four parameters for CSS transitions:

  • transition-property: the property to be tweened, or the keyword 'all' to apply to all properties;
  • transition-duration: the duration of the transition;
  • transition-timing-function: the easing to be applied, this creates more natural looking movement
  • transtion-delay: specifies a delay to the start of the transition.

In addition, you can also use the shorthand property (as in the example above) where the parameters are specified as property, duration, timing function, delay.

Properties that can be transitioned

You can only transition properties that can be translated into a mathematical value. So for example, you can transition font-size; you cannot transition font-face.

The full list of properties that can currently be transitioned is as follows:

background-position, border-bottom-color, border-bottom-width, border-left-color, border-left-width, border-right-color, border-right-width, border-spacing, border-top-color, border-top-width, bottom, clip, color, font-size, font-weight, height, left, letter-spacing, margin-bottom, margin-left, margin-right, margin-top, max-height, max-width, min-height, min-width, opacity, outline-color, outline-width, padding-bottom, padding-left, padding-right, padding-top, right, text-indent, text-shadow, top, vertical-align, width, word-spacing, z-index.

Using transitions

Transition declarations are attached to the normal state of the element. Therefore only declared once for several states such as :focus, :active and pseudo classes.

Using the following code we can set up a basic menu and a paragraph of text. It is styled so that the menu items change their color and background color when rolled over, and so that the inline link changes its underline color from white to green when hovered over:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>CSS transition demo</title>

<style type='text/css'>

/*

STATIC PROPERTIES

*/
body {background:#fff; }
ul { padding:0; margin:20px; }
li { display:inline; padding:5px 0; }
.nav a { padding:5px; }
p { padding:0; margin:21px; }
a { text-decoration:none; }


/*

PROPERTIES TO TWEEN

*/

.nav a
{
color:#bee0bf;
background:#1a9e5c;
}

.nav a:hover
{
color:#fff;
background:#38b476;
}

p a
{
color:#3fa32d;
border-bottom:1px solid #fff;
}

p a:hover
{
color:#bee0bf;
border-bottom:1px solid #3fa32d;
}


</style>
</head>
<body>

<ul class='nav'>
<li><a href='#'>Business</a></li>
<li><a href='#'>Code</a></li>
<li><a href='#'>Design</a></li>
<li><a href='#'>Inspiration</a></li>
<li><a href='#'>Miscellaneous</a></li>
<li><a href='#'>Mobile</a></li>
<li><a href='#'>News</a></li>
<li><a href='#'>Resources</a></li>
<li><a href='#'>Usability</a></li>
</ul>

<p>Integer posuere erat a ante <a href='#'>inline link</a> venenatis dapibus posuere velit aliquet. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nullam quis risus eget urna mollis ornare vel eu leo.</p>

</body>
</html>

Here's how it looks:

We want to tween those properties, to make them run smoothly. We want to tween both the color, and the background-color of the nav elements, but for the inline text, we only want to tween the underline. We do this by adding the following to our style definition:

/*

CSS TRANSITIONS
*/

.nav a
{
-o-transition: all 500ms;
-moz-transition: all 500ms;
-webkit-transition: all 500ms;
transition: all 500ms;
}

p a
{
-o-transition: border-bottom 250ms;
-moz-transition: border-bottom 250ms;
-webkit-transition: border-bottom 250ms;
transition: border-bottom 250ms;
}

And here's the result:

Do you use CSS3 Transitions? What effects have you been able to create? Let us know in the comments.

Featured image/thumbnail, motion image via Shutterstock.

Angie Vella

Angie Vella is a freelance graphic and web designer based in Malta.

Read Next

20 Best New Websites, May 2024

Welcome to May’s compilation of the best sites on the web. This month we’re focused on color for younger humans,…

Exciting New Tools for Designers, May 2024

This year, we’ve seen a wave of groundbreaking apps and tools. AI is reshaping the industry, enhancing productivity,…

Using AI to Predict Design Trends

Design trends evolve at a blistering pace, especially in web design. On multi-month projects, you might work on a…

15 Best New Fonts, April 2024

Just like web design, type design follows trends. And while there’s always room for an exciting outsider, we tend to…

3 Essential Design Trends, May 2024

Integrated navigation elements, interactive typography, and digital overprints are three website design trends making…

How to Write World-Beating Web Content

Writing for the web is different from all other formats. We typically do not read to any real depth on the web; we…

20 Best New Websites, April 2024

Welcome to our sites of the month for April. With some websites, the details make all the difference, while in others,…

Exciting New Tools for Designers, April 2024

Welcome to our April tools collection. There are no practical jokes here, just practical gadgets, services, and apps to…

How Web Designers Can Stay Relevant in the Age of AI

The digital landscape is evolving rapidly. With the advent of AI, every sector is witnessing a revolution, including…

14 Top UX Tools for Designers in 2024

User Experience (UX) is one of the most important fields of design, so it should come as no surprise that there are a…

What Negative Effects Does a Bad Website Design Have On My Business?

Consumer expectations for a responsive, immersive, and visually appealing website experience have never been higher. In…

10+ Best Resources & Tools for Web Designers (2024 update)

Is searching for the best web design tools to suit your needs akin to having a recurring bad dream? Does each…