The allure of movement catches everyone’s eye. When we integrate the dynamic element of time with web design, it stands in distinct contrast to static print design. CSS Transitions offer a straightforward approach to animate element properties, thereby enlivening user interactions on your website, without resorting to Flash or JavaScript.
As per the W3C’s precise definition, “CSS Transitions enable CSS property changes to happen smoothly over a given duration”. Simply put, CSS transitions smooth out property changes, adding fluid motion and a touch of emotion to designs, a stark difference from the starkness of immediate changes.
Compatibility Across Browsers
CSS Transitions are widely supported across all modern browsers (this does include IE!). When a browser doesn’t support transitions, it simply treats the change as instantaneous, maintaining a level of functionality—this concept is essential for best practices.
Prefixed CSS properties enhance compatibility with earlier browser versions, making transitions available for older editions of Firefox, Opera, Chrome, and Safari. The CSS syntax with vendor prefixes is shown below:
div {
-o-transition: all 1s ease;
-moz-transition: all 1s ease;
-webkit-transition: all 1s ease;
transition: all 1s ease;
}
To ensure stability, we place the standard non-prefixed property last so that it overrides the prefixed versions as browser support solidifies.
Parameters for Transitions
Four parameters determine how CSS transitions unfold:
- transition-property: specifies which property will transition;
- transition-duration: sets how long the transition lasts;
- transition-timing-function: defines the pace of the transition for a more realistic movement;
- transition-delay: introduces a waiting period before the transition begins.
The shorthand property combines all these parameters, detailing property, duration, timing, and delay in one line of code.
Animatable Properties
Certain properties lend themselves to transitions because they can be represented numerically, like ‘font-size’. Conversely, others like ‘font-face’ are not animatable.
The expansive list of transition-worthy properties includes:
background-position, border colors, widths, spacing, positioning, opacity, text properties, dimensions, and other numeric values.
Implementing Transitions
Transitions are defined in the default state of an element and apply to various pseudo-classes like :focus and :active.
Consider this basic navigation menu and paragraph. The menu items change color upon hover, while the in-text link adjusts its underline color:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>CSS Transition Demonstration</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 ANIMATE */
.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>Explore this example of an <a href='#'>inline link</a> enhancing user engagement through subtle motion. Experience the finesse and responsiveness that CSS transitions bring to web interactions.</p>
</body>
</html>
Witness the effect of these transitions:
Do you employ CSS3 Transitions in your projects? Share your experiences and creations in the comments below.
Featured image/thumbnail, depicting the essence of motion, found here.
