CSS transition property is used to change property values smoothly during specified time duration on mouse over effects.
CSS transition properties are given as below.
- transition
- transition-delay
- transition-duration
- transition-property
- transition-timing-function
transition property is short hand property of above.
We can create a transition effect by specifying CSS property where you want to add an effect and the duration of the effect.
Syntax :
transition: width 1s;
As above syntax, first value for transition property is width and second value is 1 second delay time .
Also we can use other transition properties as below
transition-delay: 1s;
transition-property : width;
transition-timing-function: linear | ease | ease-in | ease-out | ease-in-out;
transition-duration: 2s;
CSS transition-delay property is used to wait for some time before the transition effect starts.
CSS transition-duration is used to specify how many seconds (s) or milliseconds (ms) a transition effect takes to complete.
CSS transition-property property specifies the name of the CSS property where the transition effect is applied. (the transition effect will start when the specified CSS property will change).
Css transition-timing-function property specifies the speed curve of the transition effect.
All transition effect will be occured when a user mouses over the html element.
Comments