transform easeout 2s scale css code example

Example 1: 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.

Example 2: transition transform

/* Transition Transform */
.section:hover {
  transform: translateX(0px) translateY(75px);
}

.section {
  transition: transform 500ms ease-in-out 25ms;
}