CSS Transition
CSS transition property is used to make some transition effect. There are some properties of CSS transition:
- transition-property: It specifies the CSS properties in which a transition effect should be applied.
- transition-duration: It specifies the length of time a transition animation should take to complete.
- transition-timing-function: It specifies the speed of transition.
- transition-delay: It specifies the transition delay or time when transition starts.
For applying transition effect, you have to specify two things:
- the CSS property you want to add an effect
- the duration of the effect
Example:
div
{
transition-property: width;
transition-duration: 5s;
transition-timing-function: ease-in;
transition-dealy: .8s;
}
transition-property: width;
transition-duration: 5s;
transition-timing-function: ease-in;
transition-dealy: .8s;
}
Run Example
The transition-timing-function property can have the following values:
- ease
- linear
- ease-in
- ease-out
- ease-in-out
Example:
#div1
{
transition-timing-function: linear;
}
#div2 {
transition-timing-function: ease;
}
#div3 {
transition-timing-function: ease-in;
}
#div4 {
transition-timing-function: ease-out;
}
#div5 {
transition-timing-function: ease-in-out;
}
transition-timing-function: linear;
}
#div2 {
transition-timing-function: ease;
}
#div3 {
transition-timing-function: ease-in;
}
#div4 {
transition-timing-function: ease-out;
}
#div5 {
transition-timing-function: ease-in-out;
}
Run Example
Browser Support
| Attribute | Firefox | Chrome | IE | Opera | Safari |
|---|---|---|---|---|---|
| transition | 16.0 | 26.0 | 10.0 | 12.1 | 6.1 |