2. Understanding CSS Transitions
IT WAS 1997 and I was sitting in a terribly run-down apartment in beautiful Allston, Massachusetts. A typical late night of viewing source and teaching myself HTML followed a day of packing CDs at a local record label for peanuts (hence the run-down apartment). I’m sure you can relate.
One triumphant night, I pumped my fist in sweet victory. I’d just successfully coded my first JavaScript image rollover. Remember those?
I still remember the amazement of seeing a crudely designed button graphic I’d cobbled together “swap” to a different one when hovered over by the mouse. I barely had a clue as to what I was doing at the time, but making something on the page successfully change, dynamically, was, well . . .magical.
We’ve come a long way over the past decade in regard to interaction and visual experience on the web. Historically, technologies like Flash and JavaScript have enabled animation, movement, and interaction effects. But recently, with browsers rolling out support for CSS transitions and transforms, some of that animation and experience enrichment can now be comfortably moved to our stylesheets.
My first JavaScript rollover back in 1997 took me several nights of head scratching, many lines of code that seemed alien to me at the time, and multiple images. CSS3 today enables far richer, more flexible interactions through simple lines of code that thankfully degrade gracefully in the browsers that don’t yet support it.
As I mentioned in Chapter 1, we can start to use some CSS3 properties right now as long as we carefully choose the situations in which to use them. The same could be said for CSS transitions. They certainly won’t replace existing technologies like Flash, JavaScript, or SVG (especially without broader browser support)—but in conjunction with the aforementioned core CSS3 properties (and CSS transforms and animations which we’ll cover later in the book), they can be used to push the experience layer a notch higher. And most importantly, they’re relatively easy to implement for the web designer already familiar with CSS. It only takes a few lines of code.
I’m introducing CSS transitions early here in Chapter 2, as we’ll be applying them to many of the examples later in the book. Having a basic understanding of the syntax of transitions and how they work will be beneficial before we dig deeper into a case study.
Tail Wagging the Dog
Initially developed solely by the WebKit team for Safari, CSS Transitions are now a Working Draft specification at the W3C. (CSS Transforms and CSS Animations share that same lineage, and we’ll be talking about them in Chapters 4 and 6, respectively.)
This is a nice example of browser innovation being folded back into a potential standard. I say potential since it’s still a Working Draft today (meaning the spec is still in flux and could change before becoming finalized). However, CSS transition support can be found in Safari 3+, Chrome 2+, Firefox 4+, Opera 10.5+, and IE10+. In other words, while it is a draft specification and evolving, it has plenty of solid support and has come a long way from its humble beginnings as a proprietary Safari-only experiment.
Let’s take a look at how transitions work, shall we? Like the CSS3 properties discussed in Chapter 1, I’m only introducing them here along with their basic syntax so you’ll have a good handle on how they operate. Later, we’ll be doing all sorts of fun things with transitions, using them to polish the examples in the chapters ahead, and you’ll be up to speed on how transitions properly fit into the mix.
What are CSS Transitions?
I like to think of CSS transitions like butter, smoothing out value changes in your stylesheets when triggered by interactions like hovering, clicking, and focusing. Unlike real butter, transitions aren’t fattening—they’re just a few simple rules in your stylesheet to enrich certain events in your designs.
The W3C explains CSS transitions quite simply (http://bkaprt.com/css3-2/5/):
CSS Transitions allow property changes in CSS values to occur smoothly over a specified duration.
This smoothing animates the changing of a CSS value when triggered by a mouse click, focus or active state, or any changes to the element (including even a change on the element’s class attribute).
A Simple Example
Let’s start with a simple example, where we’ll add a transition to the background color swap of a link. When hovered over, the link’s background color will change, and we’ll use a transition to smooth out that change—an effect previously only possible using Flash or JavaScript, but now possible with a few simple lines of CSS.
The markup is a simple hyperlink, like so:
<a href="#" class="foo">Transition me!</a>
Next, we’ll add a declaration for the normal link state with a little padding and a light green background, followed by the background swap to a darker green on hover (FIG 2.1):
a.foo { padding: 5px 10px; background: #9c3; } a.foo:hover { background: #690; }
FIG 2.1: The normal and :hover state of the link.
Now let’s add a transition to that background color change. This will smooth out and animate the difference over a specified period of time (FIG 2.2).
FIG 2.2: The printed page sure is a clunky way to display an animated transition, but this figure attempts to do just that, showing the smooth transition of light green to darker green background.
For the time being, we’ll use only the non-vendor-prefixed properties to keep things simple. Later, we’ll add vendor prefixes for older versions of WebKit, Mozilla, and Opera.
a.foo { padding: 5px 10px; background: #9c3; transition-property: background; transition-duration: 0.3s; transition-timing-function: ease; } a.foo:hover { background: #690; }
You’ll notice the three parts of a transition in the declaration:
• transition-property: The property to be transitioned (in this case, the background property)
• transition-duration: How long the transition should last (0.3 seconds)
• transition-timing-function: How fast the transition happens over time (ease)
Timing Functions (Or, I Really Wish I’D Paid Attention in Math Class)
The timing function value allows the speed of the transition to change over time by defining one of six possibilities: ease, linear, ease-in, ease-out, ease-in-out, and cubic-bezier (which allows you to define your own timing curve).
If you slept through geometry in high school like I did, don’t worry. I recommend simply plugging in each of these timing function values to see how they differ.
For our simple example, the duration of the transition is so quick (just a mere 0.3 seconds) that it’d be difficult to tell the difference between the six options. For longer animations, the timing function you choose becomes a more important piece of the puzzle, as there’s time to notice the speed changes over the length of the animation.
When in doubt, ease (which is also the default value) or linear should work just fine for short transitions.
Delaying the Transition
Going back to our example, transitions can be delayed from the moment the trigger happens on screen. For example, let’s say we wanted the background transition to happen half a second after the link is hovered over. We can do that using the transition-delay property.
a.foo { padding: 5px 10px; background: #9c3; transition-property: background; transition-duration: 0.3s; transition-timing-function: ease; transition-delay: 0.5s; } a.foo:hover { background: #690; }
Shorthand Transitions
We could simplify the (non-delayed) declaration significantly by using the transition shorthand property, which is the syntax we’ll be using in the examples later in the book.
a.foo { padding: 5px 10px; background: #9c3; transition: background 0.3s ease; } a.foo:hover { background: #690; }
Now we have a much more compact rule that accomplishes the same result.
Shorthand transition with a delay
If we wanted to add back in the half-second delay to the shorthand version of the transition, we can do that by placing the duration value at the end of the rule, like this:
a.foo { padding: 5px 10px; background: #9c3; transition: background 0.3s ease 0.5s; } a.foo:hover { background: #690; }
Now sure, all of this wonderful transitioning looks rather simple and fun, but what about browser support?
Browser Support
As I mentioned earlier, transitions were initially developed by WebKit, and have been in Safari and Chrome since version 3.2, but Opera supports them as well from version 10.5 onward (http://bkaprt.com/css3-2/6/), Firefox 4.0 and above (http://bkaprt.com/css3-2/7/), and Internet Explorer 10+.
WebKit, Mozilla, and Opera initially supported transitions by way of vendor prefixing, and while current versions of those browsers no longer require vendor prefixes, it can’t hurt adding them in for visitors using older versions. Note that Internet Explorer has only supported transitions without a vendor prefix starting with version 10.
Building the Full Transition Stack
Here’s a revised declaration, adding the -moz- and -o- prefixes as well as the actual CSS3 transition property. Again, we’re putting the non-prefixed property last in the stack to ensure that the final implementation will trump the others as the property moves from draft to finished status or as the browser manufacturer decides to remove the prefix.
a.foo { padding: 5px 10px; background: #9c3; -webkit-transition: background 0.3s ease; -moz-transition: background 0.3s ease; -o-transition: background 0.3s ease; transition: background 0.3s ease; } a.foo:hover { background: #690; }
With that stack, we’ll be smoothing out that background color change in current versions of Safari, Chrome, Internet Explorer, and Opera, as well as future versions of any browser that chooses to support it.
Transitioning States
I remember being slightly confused when I first started playing around with CSS Transitions. Wouldn’t it make more sense if the transition properties were placed in the :hover declaration, since that’s the trigger for the transition? The answer is that there are other possible states of an element besides :hover, and you’ll likely want that transition to happen on each of those without duplication.
For instance, you may want the transition to happen on the :focus or :active pseudo-classes of the link as well. Instead of having to add the transition property stack to each of those declarations, the transition instructions are attached to the normal state and therefore declared only once.
The following example adds the same background switch to the :focus state. This enables triggering the transition from either hovering over or focusing the link (via the keyboard, for example).
a.foo { padding: 5px 10px; background: #9c3; -webkit-transition: background 0.3s ease; -moz-transition: background 0.3s ease; -o-transition: background 0.3s ease; transition: background 0.3s ease; } a.foo:hover, a.foo:focus { background: #690; }
Transitioning Multiple Properties
Let’s say that along with the background color, we also want to change the link’s text color and transition that as well. We can do that by stringing multiple transitions together, separated by a comma. Each can have varying duration and timing functions (FIG 2.3). (Line wraps marked ».)
a.foo { padding: 5px 10px; background: #9c3; -webkit-transition: background .3s ease, » color 0.2s linear; -moz-transition: background .3s ease, » color 0.2s linear; -o-transition: background .3s ease, color 0.2s linear; transition: background .3s ease, color 0.2s linear; } a.foo:hover, a.foo:focus { color: #030; background: #690; }
Transitioning all Possible Properties
An alternative to listing multiple properties is using the all value. This will transition all available properties.
Let’s drop all into our simple example instead of listing background and color separately. They’ll now share the same duration and timing function.
a.foo { padding: 5px 10px; background: #9c3; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } a.foo:hover, a.foo:focus { color: #030; background: #690; }
FIG 2.3: The normal and :hover states of the link.
This is a convenient way of catching all the changes that happen on :hover, :focus, or :active events without having to list each property you’d like to transition.
Which CSS Properties Can Be Transitioned?
Now that we’ve successfully transitioned the background and color of a hyperlink, there are many other CSS properties that can be transitioned, including width, opacity, position, and font-size. A chart of all the possible properties (and their types) that can be transitioned is available from the W3C (http://bkaprt.com/css3-2/8/).
The opportunities for wonderfully fluid experiences are clear. We’ll be using several of these properties in conjunction with transitions throughout our case study examples in the next chapter and onward.
Why Not Use Javascript Instead?
You might be wondering, with not all browsers supporting (or at least promising support for) CSS Transitions, why not use a JavaScript solution to handle the animation? Popular frameworks such as jQuery, Prototype, and script.aculo.us have enabled animations via JavaScript that work cross-browser for some time now.
It all depends on how crucial the transitions are to the experience. I’m stressing here in this little book that you can embrace the simplicity and flexibility of CSS3 if you choose the appropriate parts of the user experience to apply it: enriching the interactions that happen on the page. Quite often, the animation of these interactions when handled by CSS Transitions aren’t integral to the brand, readability, or layout of the website. Therefore, a few simple lines of CSS to trigger a simple animation that’s native to the browsers that support it (rather than tapping into a JavaScript framework) seems like a smart choice. And one I’m glad we have at our disposal.
Be Smart, Be Subtle
Like all shiny new tools, it’s important to use transitions appropriately. One can easily go overboard adding transitions to everything on the page, resulting in some sort of annoying, pulsating monster. It’s key to decide where transitions rightfully enrich the user experience and when they are just extraneous noise. Additionally, making sure the speed of the transition doesn’t slow down an otherwise snappy action from the user is crucial. Use with care and caution.
For more thoughts on appropriate speeds for CSS transitions and animations, see Trent Walton’s post on the subject: http://bkaprt.com/css3-2/9/.
Now that we have a solid base knowledge of how CSS transitions work at a technical level, we can use them to smooth out the experience layer in the examples that follow, beginning with the very next chapter. Let’s get to it.