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.
transition-timing-function as a property to the
.game .gazelle ruleset with the value
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.