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.
transition-timing-function as a property to the
.game .gazelle rule 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.
Now change the value to
ease-in. Observe the difference once again.
Change the timing function value to
linear. How does that affect the speed of the motion?
Change the value to
ease-in-out. Observe the difference again.
Change the value back to the default,
ease. Can you tell the minor difference between
ease? It is very subtle.