The next 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.



Let’s use the transition-timing-function property in a game! Find the gazelle in the picture to your right and move your mouse over it. Hint: It’s under a zebra’s head.

Add transition-timing-function as a property to the .game .gazelle ruleset with the value linear.

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.

Take this course for free

Mini Info Outline Icon
By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.

Or sign up using:

Already have an account?