Learn
CSS Transitions
Timing Function

The last transition property is transition-timing-function. The timing function describes the pace of the transition.

The default value is ease, which starts the transition slowly, speeds up in the middle, and slows down again at the end.

Other valid values include:

  • ease-in — starts slow, accelerates quickly, stops abruptly
  • ease-out — begins abruptly, slows down, and ends slowly
  • ease-in-out — starts slow, gets fast in the middle, and ends slowly
  • linear — constant speed throughout
transition-property: color; transition-duration: 1s; transition-timing-function: ease-out;

In the example above, the text color will be animated over one second. The timing function is ease-out which means it will begin abruptly and slow down as it ends.

If you’re interested in learning more about timing functions or seeing a full list of the possible values, we recommend this resource from the Mozilla Developer Network.

Instructions

1.

Add transition-timing-function as a property to the .game .gazelle rule with the value ease-out.

Hover your mouse over the gazelle to observe the difference in motion. If you can’t tell the difference, you can change the transition-duration value to be longer.

2.

Now change the value to ease-in. Observe the difference once again.

3.

Change the timing function value to linear. How does that affect the speed of the motion?

4.

Change the value to ease-in-out. Observe the difference again.

5.

Change the value back to the default, ease. Can you tell the minor difference between ease-in-out and ease? It is very subtle.

Folder Icon

Take this course for free

Already have an account?