CSS3 Transitions(Fg. 1)

    With CSS3, we can add an effect when changing from one style to another, without using Flash animations or JavaScripts.

   Internet Explorer 10, Firefox, Chrome, and Opera supports the transition property.

Safari requires the prefix -webkit-.

Note: Internet Explorer 9, and earlier versions, does not support the transition property.

Note: Chrome 25, and earlier versions, requires the prefix -webkit-.

Fg. 1 (CSS3 Transitions)

div
{
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s
/* Safari */
-webkit-transition-property:width;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:linear;
-webkit-transition-delay:2s;
}

Fg. 2.1 (How does it work?)

div
{
transition: width 2s;
-webkit-transition: width 2s; /* Safari */
}

Fg. 2.1 (How does it work?)

div:hover
{
width:300px;
}

How does it work?(Fg.s 2)

CSS3 transitions are effects that let an element gradually change from one style to another.

To do this, you must specify two things:

  • Specify the CSS property you want to add an effect to
  • Specify the duration of the effect.

(See Fg. 2.1)

If the duration is not specified, the transition will have no effect, because default value is 0.

The effect will start when the specified CSS property changes value. A typical CSS property change would be when a user mouse-over an element:

(See Fg. 2.2)

When the cursor mouse out of the element, it gradually changes back to its original style.