CSS3 transitions allows you to change property values smoothly, over a given duration.
Example: Mouse over the element below to see a CSS3 transition effect:
The following example adds a transition effect for both the width and height property.Output:
The transition-timing-function property specifies the speed curve of the transition effect.
The transition-timing-function property can have the following values:
1. ease - specifies a transition effect with a slow start, then fast, then end slowly (this is default).
2. linear - specifies a transition effect with the same speed from start to end.
3. ease-in - specifies a transition effect with a slow start.
4. ease-out - specifies a transition effect with a slow end.
5. ease-in-out - specifies a transition effect with a slow start and end.
6. cubic-bezier(n,n,n,n) - lets you define your own values in a cubic-bezier function.
Example: Difference between linear transition, ease transition, ease-in transition, ease-out transition, ease-in-out transition.
We can specify both the transition and transformation.Output: