Transition Preview:

Generated CSS:

About CSS Transition

The dynamic nature of web pages these days is not limited to the processing of data but can extend to the appearance through CSS. Styling no longer has to be static. With CSS transition, styling can change for a period of time when triggered by certain events.

CSS transition is not limited to highlighting menu options or altering text formatting. The nature of CSS transitions essentially brings animation to a webpage through CSS, albeit limited to CSS elements, but without the need for Flash.

CSS Transition Effects

The change in styling is referred to as the transition effect. It may be a single element that changes with the predefined transition effect, or the styling of even multiple elements can be manipulated simultaneously or sequentially.

It is important to remember that two aspects need to be stated in order for the transition effect to take place. First is the element property that the transition effect applies to, and the second is the duration over which the transition effect will occur. Without these two properties, a transition will not occur.

CSS Transition Properties

Apart from transition-property and transition-duration that are necessary, there are two other transition properties that can be changed for a specific effect. These are transition-delay and transition-timing-function.

ransition-property is the element property that will be changed in the effect.

Transition-duration is the period of time over which the effect will take place.

Transition-delay is the period of time that must elapse before the effect starts.

Transition-timing-function is the speed curve of the effect which allows for the calculation of intermediate values.

CSS Transition Code Examples

Let us start with a single property in order to understand CSS transition effect. First let us start with standard CSS to define a blue square with a 100px width and height.

Now let us create a transition effect where the square stretches horizontally. We will increase the width to 300px over a period of 2 seconds.

However, we also have to declare the event trigger. In this case the transition effect will commence when the mouse hovers over the square.

We can bring in the transition-timing-function and transition-delay as follows:

So a blue square of 100px height and width will now stretch horizontally (width increases) to 300px when the mouse hovers over it. This effect will take 2 seconds to complete but will only start after a 1 second delay at the outset and the movement will be in a linear fashion. The value of transition-timing-function can be linear (as in the code above), ease or step.

It is important to note that CSS transition effects do not work in Internet Explorer 9 and earlier versions. For Safari browser, the property has to be appended with a –webkit- prefix so transition-property will be –webkit-transition-property.

The code above can also be shortened to declare all the different properties in one line as follows:

With regards to our example above, the code would be:

Furthermore multiple element properties can be manipulated at the same time. Let us assume that the both the width and height will increase from a starting dimension of 100px to 300px (code as in previous example). This will happen in a linear fashion over 2 seconds after a 1 second delay.

It can be done by using a comma (,) to separate the transition effect of each property as follows:

Supporting Browsers

At the time of writing the following browsers support the CSS3 transition property: