Kevin Western's Blog

CSS3: An Introduction to Transitions

Part of CSS3’s features that have a lot of popularity behind them are its transitions, transformations and animations. We’re no longer dependent on a JavaScript library providing basic animations; we can let the browser do the heavy lifting for us. In my experience, popular JS animations have been simple transitions. In this post I’ll explore how to get started using CSS3’s transitions.

Transition

CSS3’s transition property is known simply as “transition”. However, because the transition spec is still a working copy, we’ll need to use browser prefixes. Let’s look at a quick example:

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
#example {
    width: 75px;
    height: 75px;
    background-color: black;

    -moz-transition-property: all;
    -o-transition-property: all;
    -webkit-transition-property: all;
    transition-property: all;

    -moz-transition-duration: 2s;
    -o-transition-duration: 2s;
    -webkit-transition-duration: 2s;
    transition-duration: 2s;

    -moz-transition-timing-function: ease-in;
    -o-transition-timing-function: ease-in;
    -webkit-transition-timing-function: ease-in;
    transition-timing-function: ease-in;

    -moz-transition-delay: 0.5s;
    -o-transition-delay: 0.5s;
    -webkit-transition-delay: 0.5s;
    transition-delay: 0.5s
}

#example:hover {
    background-color: red
}
Hover

Breakdown

The code may appear intimidating but fear not! It looks like a lot of code but it’s really not. The extra browser prefixes adds a lot of bloat. You should be using a CSS preprocessor such as compass, less or stylus to write these prefixes for you.

transition-property

The first group of transition styles target the ‘transition-property’. The ‘transition-property’ field denotes which css property you’d like transition to apply to. For example, I could have specified ‘background-color’ instead of ‘all’ to achieve the same effect in this scenario. Having a value of ‘all’ will apply the transition when any other css property changes. See animatable properties in the CSS3 Transition working draft for a list of css properties that can be animated.

transition-duration

The second group of transition styles specify how long the transition should last.

transition-timing-function

The third group, ‘transition-timing-function’ property, describes how the intermediate values between the start and end of the transition will be calculated. Another word for this effect can be called the ‘easing’ function. A list of timing functions have already been defined for us: ease, linear, ease-in, ease-out, ease-in-out, step-start, step-end. See what the different effects look like here. These timing functions are built using a stepping function or a cubic Bezier curve. Read more about timing functions here.

transition-delay

The fourth and final property we’ll look at is the ‘transition-delay’ property. This property simply states how long the transition should wait, or be delayed, until the transition starts.

transition shorthand notation

I’ve used the longhand notation for this example to allow for easy explanation. We can reduce the example to shorthand notation in the following format:

1
transition: <property> <duration> <timing-function> <delay>

Using this notation the example above would look like the following:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
#example {
    width: 75px;
    height: 75px;
    background-color: black;

    -moz-transition: all 2s ease-in-out 0.5s;
    -o-transition: all 2s ease-in-out 0.5s;
    -webkit-transition: all 2s ease-in-out 0.5s;
    transition: all 2s ease-in-out 0.5s
}

#example:hover {
   background-color: red;
}

Read more about shorthand notation.

CSS3 allows for simple and elegant transitions which otherwise would require extra JavaScript code and testing. With better browser adoption and even mobile adoption of CSS3 I’m excited to drop JS animation libraries.

Comments