Home > Abakada: Back to Basics > Dynamic HTML > CSS Visual Effects > Using CSS Transitions

Dynamic HTML   CSS Visual Effects

---

CSS transitions allow web authors to create gradual transitions between values of specific CSS properties.

A transition in CSS is basically a timed interval of a change or shift from one state to another.

Transitions present simple yet powerful visual effects that can help enhance usability and appeal on any web page.

CSS transitions provide a way to control animation speed when changing style properties.

Instead of having property changes take effect immediately, you can cause the changes in a property to take place over a given period of time.

For example, if you change the color and size of an element from one value to another, the change is instantaneous. With CSS transitions enabled, changes occur at timed intervals that follow an acceleration curve, all of which can be customized.

Run Sample | View Source

Note that no additional coding is required. The animation is rendered simply by using HTML and CSS.

At design time, we need only to specify the start and end states. The states between the starting and ending states, or the intermediate states, are automatically calculated and implicitly defined by the browser at run time.

For example, to change the background image from one value to another, we just need to specify the start and end source files, and define the transition in the CSS style declaration.

Run Sample | View Source

Notice how the browser seamlessly dissolves the images in transition.

Now let’s take a closer look at how transitions are done.

To enable transitions, we use the transition CSS shorthand property with a predefined set of attributes, or parameters, meant to configure the transition effect.

In its simplest form, a transition needs to define at least two required parameters:

• transition-property ~ one or more CSS property names to which the transition is to be applied.
• transition-duration ~ how long the transition will last, or the duration over which the transition should occur.

element { transition: property duration }

NOTE: transition-property and transition-duration are both mandatory, as no transition can occur if neither property nor duration is explicitly set.

The transition declaration can take multiple property and duration parameter pairs, separated by a comma, as shown in the demos given earlier.

#box { transition: background 5s, width 2s, height 2s }

Run Sample | View Source

Run Sample | View Source

In addition, a transition declaration can include any or all of the following optional parameters, which serve to enhance the transition effect.

• transition-timing-function ~ choice of easing function that defines how intermediate values are calculated for properties being affected by the transition effect.
• transition-delay ~ specifies when the transition will start, or the wait time before the transition actually begins.
• transition-behavior ~ specifies whether transitions will be started for properties whose animation behavior is discrete.

element { transition: property duration easing delay behavior }

How a transition effect actually renders at runtime depends on the combined results of the given parameters.

Now let’s take a closer look at each of these parameters, and how we can effectively use them to apply appealing visual effects to our web pages.

NOTE: This section is currently under major reconstruction. Please bear with whatever inconvenience you may encounter; we hope to complete the job at the soonest possible time.

CSS Transition Properties