CSS3 Transitions Properties
CSS3 transitions include various of properties to configure the transition:
- transition-property: the CSS property name that the transition is applied to. You can write more than one property as long as you separate the different properties with commas.
- transition-duration: the duration of the transition in seconds. The default value for the duration is 0 and therefore without a duration the transition won’t occur.
- transition-timing-function: the timing function that describe the speed of the duration and how it should be calculated by the browser. It can receive a various of timing functions like linear, ease-in, ease-out, cubic-bezier. The default value is ease.
- transition-delay: defines when the transition starts. The default value is 0 meaning the transition will start immediately.
- transition: a shorthand property that includes all the previous transition property configuration. Every property is separated by comma.
Here is an example of using a transition on an image with img id:
The transition will occur when you hover over the image. It will change the image width and height using two different timing functions (linear and ease-in), with a delay of a second and a duration of two seconds. When you stop hovering the image will return to it’s previous state again using the same transition. Another point of interest in the code sample is the use of browser prefixes. Since the CSS3 transitions specification isn’t a recommendation yet the browser vendor use their own prefixes.
Combining Transitions with Other CSS3 Modules
One of the great result of all the new CSS3 modules is the ability to combine different CSS modules to create better User Experience (UX). For example, you can combine transitions with transformations to create fancy animations such as rotating a moving element. Here is a simple combination example:
This previous CSS will rotate the image with img id when you hover on it clockwise in two seconds duration.
CSS3 Transitions Support
Chrome from version 22.
Firefox from version 15.
From Internet Explorer 10.
Safari from version 5.1.
Opera from version 12.
CSS3 transitions help to change CSS properties over a specified duration with a timing function. Using it in applications can help to reduce the amount of scripts that you write in order to create simple animations. Let the browser do all the animation calculations for you.