CSS3 Transitions

 

CSS3 transitions allows you to change property values smoothly (from one value to another), over a given duration.

 

How to use css3 transitions?

To create a transition effect,you must specify two things:

• the css property you want to add an effect to
• the duration of the effect

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

The following example shows a 100px*100px red <div> element.The <div> elements has also specified a transition effect for the width property,with a duration of 2 seconds:

Example:

div {
    width: 100px;
    height: 100px;
    background: red;
    -webkit-transition: width 2s; /* Safari */
    transition: width 2s;
}

The transition effect will start when the specified CSS property (width)changes value.

Now,let us specify a new value for the width property when a user mouses over the <div> element:

Example

div:hover {
    width: 300px;
}

Notice that when the cursor mouses out of the element ,it willgradually change back to its original style.

Change Several Property Values

The following example adds a transition effect for both the width and height property,with a duration of 2 seconds for the width and 4 seconds for the height:

Example:

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

Specify the Speed Curve of the Transition

The transition-timing-function property specifies the speed curve of the transition effect.

The transition-timing-function property can have the following values:

• ease
• linear
• ease-in
• ease-out
• ease-in-out
• cubic-bezier(n,n,n,n)