By using Transition, our transforms will become smoother.

.box {
  /* `transform` happens in 0.5s, linear rate, delay 1s */
  transition: transform 0.5s linear 1s, background 0.5s;
}

linear means our transition will go at a linear rate, alternatively, you can also set to

• ease-in go quick first, then slow
• ease-out go slow first, then fast
• cubic-bezier() custom cubic-bezier curve