What CSS3 transitions are and how we can use them

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...