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:
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
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.
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.
The second group of transition styles specify how long the transition should last.
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.
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:
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
Read more about shorthand notation.