Transition Duration and Timing Functions

You can control how fast transitions occur using duration and timing functions:

• linear
• ease
• ease-in
• ease-out
• ease-in-out

Example:

div {
  transition: all 1s ease-in-out;
}

Practice Task:
Test different timing functions on a box and observe how the animation feels.