In the last two chapters we looked at some of the new features and functionality that CSS3 provides. However, until now, everything we have looked at has been static. But CSS3 can do more.
At present, chances are, if you need to animate elements on a web page you'll either write your own JavaScript to perform the required action or turn to a popular JavaScript library like jQuery to do the heavy lifting. However, someone involved with CSS3 clearly has issues with JavaScript's ubiquity in this area and they're looking to encroach on JavaScript's dominance. While CSS3 isn't likely to usurp jQuery or the like anytime soon, it's perfectly capable of things like smoothing transitions (for example, on mouse hover) and moving elements around the screen. This is great news for us, as it means for the growing number of devices sporting modern browsers (recent smart phones for example), we can use CSS to provide animations rather than relying on JavaScript. The upshot: you can probably scratch 'learn how to animate elements with jQuery' off the 'to do' list as we can now do all that fun stuff in pure CSS. As ever, these CSS3 features don't break anything for browsers lacking the features; they'll just skip over the rules they don't understand like they weren't there.
In this chapter, we'll cover:
- What CSS3 transitions are and how we can use them
- How to write a CSS3 transition and its shorthand syntax
- CSS3 transition timing functions (ease, cubic-bezier, and so on)
- Fun transitions for responsive web sites
- What CSS3 transformations are and how we can use them
- Understanding different 2D transformations (scale, rotate, skew, translate, and so on)
- Dabbling with 3D transformations
- Animating with CSS3 (using keyframes)
When styling hyperlinks in CSS, it's common practice to create a hover state; an obvious way to make users aware that the item they are hovering over is a link. They're of less relevance to the growing number of touch screen devices but for everyone else, they're a great and simple interaction between website and user.
Traditionally, using only CSS, hover states are an on/off affair. There is one state as the default, that instantly changes to a different state on hover. However, CSS3 transitions, as the name implies, allow us to transition between one state and another. It's not specific to hover states but let's start there.
In the previous chapter, we created a CSS3 button with a red gradient background. This is the CSS3 used (with the additional vendor prefixes removed for brevity):
#content a {
text-decoration: none;
font: 2.25em /* 36px ÷ 16 */ 'BebasNeueRegular';
background-color: #b01c20;
border-radius: 8px;
color: #ffffff;
padding: 3%;
float: left;
background: linear-gradient(90deg, #b01c20 0%, #f15c60 100%);
margin-top: 30px;
box-shadow: 5px 5px 5px hsla(0, 0%, 26.6667%, 0.8);
text-shadow: 0px 1px black;
border: 1px solid #bfbfbf;
}#content a:hover {
border: 1px solid #000000;
color: #000000;
text-shadow: 0px 1px white;
}And here are the two states, first the default:
And then here's the hover state:
It's a simple change of text, text-shadow, and border color on hover. So, as you might imagine, with the current CSS, hovering the mouse over snaps from the first state (white text) button to the second (black text); it's an on/off affair. Let's add a little CSS3 magic to our first rule:
#content a {
/*…existing styles…*/
transition: all 1s ease 0s;
}Now when we hover over the button, the text, text-shadow, and border color all transition smoothly from one to the other. You'll notice the transition is applied to the original element, not the hover state. This is so that different states such as :active can also have different styles set and enjoy the transition. So remember, the transition declaration is added to the element it transitions away from. But how do transitions actually work?
A transition can be declared using up to four properties or a single shorthand declaration including all four:
transition-property: the name of the CSS property to be transitioned (such asbackground-color,text-shadow, orallto transition every possible property).transition-duration: the length of time over which the transition should occur (defined in seconds, for example.3s,2s, or1.5s).transition-timing-function: how the transition changes speed during the duration (for exampleease,linear,ease-in,ease-out,ease-in-out, orcubic-bezier).transition-delay: an optional value to determine a delay before the transition commences. Alternatively, a negative value can be used to commence a transition immediately but part way through its transition 'journey'.
Used separately, the various transition properties can be used to create a transition as follows:
#content a {
...(more styles)...
transition-property: all;
transition-duration: 1s;
transition-timing-function: ease;
transition-delay: 0s;
}As we've already seen however, we can roll these individual declarations into a single, shorthand version:
transition: all 1s ease 0s;
One important point to note when writing the shorthand version is that the first timing value given is always taken to be the transition-duration. The second timing value is taken to be the transition-delay.
As ever, it's important to use vendor prefixes. For example, a stack of vendor-prefixed versions of the prior shorthand declaration would be as follows:
-o-transition: all 1s ease 0s;
-ms-transition: all 1s ease 0s;
-moz-transition: all 1s ease 0s;
-webkit-transition: all 1s ease 0s;
transition: all 1s ease 0s;
We've placed the non-prefixed 'official' version last so it will overwrite the others when browsers have fully implemented the standard.
Tip
Limitations of transitions
There are some caveats to using transitions; some properties can't be transitioned, despite the specifications (even the latest editor's draft at http://dev.w3.org/csswg/css3-transitions/) saying it should be possible. For example, the background-gradient property. However, you can, in theory, transition all these properties (http:// www.w3.org/TR/css3-transitions/#properties-from-css-).
Where a rule has multiple properties declared you don't have to transition all of them in the same way. Consider this rule:
#content a {
...(more styles)...
transition-property: border, color, text-shadow;
transition-duration: 2s, 3s, 8s;
}Here we have specified with the transition-property that we'd like to transition the border, color, and text-shadow. Then with the transition-duration declaration, we are stating that the border should transition over 2 seconds, the color over 3 seconds, and the text-shadow over 8 seconds. The comma-separated durations match the comma-separated order of the transition properties.
Most of the transition properties are self-explanatory. We've covered the list of properties that can be (or should be!) transitioned. Durations and delays are set with seconds (for example 2s) so they're simple enough to understand but the one property that can cause some head scratching is the timing functions. Just what do ease, linear, ease-in, ease-out, ease-in-out, and cubic-bezier actually do? Each of them is actually a cubic-bezier-curve—essentially the same as an easing function. I realize that perhaps doesn't mean much to you either. So… this is one of those situations where words (and certainly this author's power to wield them well enough) struggle to offer a satisfactory explanation—much like if you have to give your other half a satisfactory explanation for why you've forgotten their birthday! Instead, I recommend you head over to http://cubic-bezier.com/.
This site lets you compare timing functions and see the difference each one makes. However, even if you can write your own cubic-bezier curves blindfolded (while also counting backwards from a thousand in Mandarin), the likelihood is, for most practical situations, it makes little difference. Here's why…
Like any enhancement, it's necessary to employ transition effects subtly. For 'real world' implementations, transitions that occur over too great a period of time tend to make a site 'feel' slow. For example, navigation links that take 5 seconds to transition are going to frustrate, rather than 'Wow!' your users. Therefore, unless there is a compelling reason to do so, using the default transition (ease) over a short interval (a maximum of 1 second is my own preference) is often best.
Once you become a responsive web design junkie, you'll find yourself constantly resizing the browser window on websites you visit to see if it's responsive. Keep in mind this habit infuriates 'normal' people, so best only do it in private.
A great website I often visit that discusses CSS techniques is Chris Coyier's excellent http://css-tricks.com. After a re-design I happened to resize the browser window and smiled knowingly as the different on-screen elements whizzed about the screen. What magic had Chris employed to bring this effect about? Something similar to this:
* {
transition: all 1s;
}Here, we are using the CSS universal selector
* to select everything and then setting a transition on all elements over 1 second (1s). As we have omitted to specify the timing function, ease will be used by default and there will be no delay as again, a default of none is assumed if an alternative value is not specifically added. The effect? Well, most things (links, hover states, and the like) behave as you would expect. However, because everything transitions, it also includes any rules within media queries, so as the browser window is resized, elements sort of flow from one state to the next. Is it essential? Absolutely not! Is it fun to watch and play around with? Certainly!