css transitions ease in out ease in linear code example

Example: ease , ease out , ease in , linear meaning in html

ease = starts slow , speeds in middle and slow again in the end.
ease-in  = slow in the beginning , speeds up  in the end.
ease-out = speeds in the beginning, slow in the end.
linear = as the name suggest, i.e. constant speed throughout the animation.


ease-in-out = starts slow, fastest in the middle , slow again in the end.



DIFFERENCE BETWEEN EASE & EASE-IN-OUT :

ease is like ease-in-out , but in ease the starting time of speeding
is less than the starting time of speeding in ease-in-out.
That means in ease the animation will start speeding before the animation 
speeds in ease-in-out.