Css3 Transitions Tutorial : First Transition

Prev   Next

Chapter 3. Our first transition

So, how do we use transitions? It is much simpler than it seems because we are just modifying CSS properties.

There are five sub-properties of transitions, and we will begin by studying two of the main ones:

  • transition-property
  • transition-duration

[Note]Note

CSS3 standards are not finalized and not all browsers interpret these properties in the same way, if at all. Internet Explorer does not currently support transitions, but we can use prefixes for Firefox, Google Chrome, Opera and Safari. Thus, it is best to write -moz-transition-property for Firefox, -webkit-transition-property for Google Chrome and Safari, and -o-transition-property for Opera. For the sake of clarity in this tutorial, properties will be used without prefixes.

transition-property allows us to indicate which properties of our element we want to be transitioned. Its value is all by default, which means that all the element’s properties are subject to transition.

If we want to apply transitions to several properties, we just have to separate them with comas:

p
{
    /* Only the text color and the dimensions of
    paragraphs will be transitioned. */
    transition-property: color, width, height;
}

However, we’re not quite done yet. We still have to specify transition-duration: this property indicates how long it should take for the transition to move from the initial state to the final state.

We can specify a time in seconds or milliseconds. To do that, just add s or ms, respectively, to the end of the value.

p
{
    /* Only the text color and the dimensions of
    paragraphs will be transitioned. */
    transition-property: color, width, height;

    /* The transitions will take 3 seconds. */
    transition-duration: 3s;
}

Our transitions are defined. Now we have to indicate when to use them! Don’t worry, it is totally magic: transitions will occur automatically when concerned properties are updated!

For example, let’s modify a paragraph when the mouse moves over it. For this, we’ll use the pseudo-element :hover:

/*Default style (=intial state)*/
p
{
    /* Only the text color and the dimensions of
    paragraphs will be transitioned. */
    transition-property: color, width, height;

    /* The transitions will take 3 seconds. */
    transition-duration: 3s;

    /* Some style for our paragraphs. */
    width: 400px;
    height: 200px;
    color: #fff;
    background-color: #a5a5a5;
    border: 2px solid #000;
    margin: auto;
    text-align: center;
}

/* Style when the mouse moves over paragraphs
(= final state). */
p:hover
{
   width: 300px;
   height: 300px;
   color: #000;
}

We can test this with basic HTML5 code. Note that the CSS is saved in the style.css file.

<!DOCTYPE html>
<html>
    <head>
        <title>Our first transition</title>
        <meta charset="UTF-8" />
        <link rel="stylesheet" type="text/css" href="style.css" />
    </head>
    <body>
        <p>
            I want the mouse!
        </p>
    </body>
</html>

Try it!

[Note]Note

The big advantage of transitions is that they are not blocking: if your visitor cannot interpret them, the value of the properties will still be modified. The only difference is that the changes will be not progressive.

Prev   Next
 Home | ToC