freeCodeCamp's Change Animation Timing with Keywords, Responsive Web Design

Lesson Summary

In this challenge we look at the animation-timing-function. We learn that we can use the animation-timing function to control the speed and timing of an animated element during the time it plays (animation-duration controls how long our animation will run as we learned in previous lessons). We learn that there are predefined keywords we can use and the default value is "ease". Ease starts slow, then in the middle it speeds up, and finally it slows again. In this challenge we have to elements with the id's #ball1 and #ball2. We give each an animation-timing-function with the values of linear, and ease-out respectively.

Subscribe To Monthly Newsletter. Chance to Win Monthly Prizes

* indicates required