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

---

CSS transitions describe how CSS properties can be made to change smoothly from one value to another over a specified duration.

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

Run Sample | View Source

Run Sample | View Source

Run Sample | View Source

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

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

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

For example, if you want to change the color of an element from one value to another, by default, CSS switches the style of these states instantly.

With CSS transitions enabled, though, changes occur at time intervals that follow an acceleration curve, all of which can be customized.

Run Sample | View Source

Notice that minimal coding is required. The animation is rendered simply by HTML and CSS, with basic inline event handlers ( for the mouseover and mouseout events ) to trigger the change.

NOTE: Before any transition can be enabled, the page code must include CSS that defines the change of state for the property you intend to animate, and a handler for the event that will trigger that state change.

Below is a step-by-step look at how this is done.

1. Define, at design time, the element in which the desired change in property will take effect. For this example, we use a <div> element given an id of "box".

   <div id="box" ... >
      ...
   </div>

2. Specify which CSS property ( or properties ) of the <div> to change, and define its start and end values.

   In this case, this is done by declaring two CSS class definitions: one for setting the start values and one for setting the end values for each property that the transition will apply to.

   .start {
      width:100; height:50; background: darkolivegreen }
   .end {
      width:400; height:200px; background: cadetblue }
   

   While in this example, the classes are assigned to the <div>, they can be used for any other element that supports the said properties.

   Note that only the start and end states need to be specified. The states in-between, or the intermediate states, are automatically calculated and interpolated by the browser at run time.

3. Configure the transition for the <div>, the meaning of which is explained below.

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

   That declaration effectively states that the transition should be applied to the said properties of the <div>, over the given duration of time ( 2 seconds for the width and height, and 5 seconds for the background color change ).

   When and how the transition should take effect is defined in the next step. In this case, we simply implement a CSS class change.

4. Assign the start class to the <div>, and define the handlers for the mouseover and mouseout events to effect the change.

   <div id="box" class="start"
      onmouseover="this.className='end'"
      onmouseout="this.className='start'">
   </div>

   With this method, the transition is triggered whenever a user hovers over and out of the <div>.

The below example shows a variation of the above, this time to change the background image from one value to another. In this case, we simply specify the image files for the start and end states.

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 configured.

To enable transitions, we can use the various transition properties, or the transition shorthand property.

For this discussion, we shall be using the shorthand version along with a predefined set of attributes, or parameters, that serve 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: width 2s, height 2s, background 5s }

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