CSS3 Transitions

Here is the brief explanation on how to apply transition effect for html element in css3.

Explanation

CSS3 transitions allows you to change property values smoothly (from one value to another), over a given duration.
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

Property :

transition-property: none | all | [ ] [, ]*

Usage:


Considering the below 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. When the cursor mouses out of the element, it will gradually change back to its original style.


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:
div {
-webkit-transition: width 2s, height 4s; /* Safari */
transition: width 2s, height 4s;
}

Definition:

A shorthand property for setting the four transition properties into a single property.

The transition properties are:
  • transition-delay
  • transition-duration
  • transition-property
  • transition-timing-function

Example 1 :
<style>
.demodiv:hover {
width: 300px;
}
.demodiv{
width: 100px;
height: 100px;
background: indigo;
transition: width 2s;
-webkit-transition: width 2s;
}
</style>
<div class='demodiv'>
</div>

Result:



Ask Questions

Ask Question