Transition is the change from one point to other over a duration of time. CSS uses the transition property to change the values of other property smoothly over a specified time period.
There are two things that you need to specify for the transition property:
The property that you need to add the transition effect to
The duration for which you want the transition to expand. (default value 0)
For example, let’s say there is an image on your web page with current width 20px. You want the width to change to 100px every time you hover the mouse over the image. But instead of this happening immediately, you want the change to take place over, say, 2 seconds.
This is where transition comes in play. You can set the transition value for “img” to “width 2s” which means that the transition will take place on the width property for the duration of 2 seconds.
Multiple Properties
To make the transition effect on multiple properties, you can set the property-duration pair separated by commas.
transition-time-funtion
The speed curve of the transition can be set using the transition-time-function. In simpler words, how steady the transition would take place on the given duration is set using this property. The permissible values for these are:
ease – Slow at start and end and fast in between
linear – The same speed right from the start up till the end
ease-in – Slow only at start
ease-out – Slow only at end
ease-in-out – Similar to the ease value
cubic-bezier(n,n,n,n) – Uses the cubic-bezier function to specify the speed-curve manually.
Transition-delay
This property specifies a delay before the transition starts to effect. The value can be given in seconds.
The transition can also be used along with transformation. With all the different property-duration pairs we can specify the “transform duration” as well.