Everything about css transition property

CSS Transition

If we want to change one thing to another then we use transition to make the changes smooth and look beautiful. For example, we have a div which height is 50px and width is 50px. Now we want that if we take cursor on the div, then the height and width of div will increase. Without transition the changing will happen suddenly and so fast. This will not looks so good. But if we use transition, we can set some properties while changing, like how many times it will take to change means transition duration, after taking the mouse when the change should start, etc. This is will make the changing looks good.

The properties are:
transition-property:
Here we write those property names which we want to change like width, height, color, etc. Suppose we want to run transition on width.So here we will write width. Now if we have more then just give coma and write the properties.For example we want to change height, width and color,
then :
transition-property:height, width, color;

transition-duration:numeric value in second(like 2s or 5s etc)
Here we put values for changing time. It means how long the element should take time to change. If we write 10s, it means that the element will take 10 second to change. Now if we have more than one property in transition-property then for each value of transition-property we have to write the duration time. Suppose we have two properties in transition-property, height and width.
then
transition-duration:2s,5s;
It means for changing height will take 2s and changing width will take 5s.
But if we want to apply same duration to all the property then pass only one value,
transition-duration:2s;

transition-delay:
When transition should start. Suppose after 5 second the transition should start, when user put the cursor on a div. So here we want to delay the transition 5 second.
transition-timing-function:
There are some fixed values to show transition like fast, slow or fast when start and slow in the end, etc.
The values are:
ease--->slow start,then fast,then end slowly
linear--->same speed form start to end
ease-in--->slow start
ease-out--->slow end
ease-in-out--->slow start and end
steps--->numeric_value
If we want that the animation will complete in 5 steps then we will write 5.
Example:step(5)
Similarly for steps like 7, 10, 100 we will write step(7), step(10) and step(100)
steps--->steps size,end
steps--->steps size,start
If we do this then the animation will run according to the given steps and after ending when it come back in its original form then it will also come back according to the given steps.
For example:
steps(5,end);
steps--->(5,start);
cubic-bezier--->numeric value.
Here we can define the speed in 4 steps. Here we put 4 values between 0-1. Suppose at first we want more speed then we want slow speed then again little fast speed and then slow.
To do this we will write:
cubic-bezier:(0.8,0.2,0.2, 0.5)
transition:transition-property_value transition-duration_value transition-timing-function transition-delay;
It is a short hand technique. Here we can pass all the properties value in a single line.
Example:
transition: width 2s linear 0s;