---
id: 587d78a8367417b2b2512ae7
title: Change Animation Timing with Keywords
challengeType: 0
videoUrl: 'https://scrimba.com/c/cJKvwCM'
---
## Description
In CSS animations, the animation-timing-function
property controls how quickly an animated element changes over the duration of the animation. If the animation is a car moving from point A to point B in a given time (your animation-duration
), the animation-timing-function
says how the car accelerates and decelerates over the course of the drive.
There are a number of predefined keywords available for popular options. For example, the default value is ease
, which starts slow, speeds up in the middle, and then slows down again in the end. Other options include ease-out
, which is quick in the beginning then slows down, ease-in
, which is slow in the beginning, then speeds up at the end, or linear
, which applies a constant animation speed throughout.
## Instructions
For the elements with id of ball1
and ball2
, add an animation-timing-function
property to each, and set #ball1
to linear
, and #ball2
to ease-out
. Notice the difference between how the elements move during the animation but end together, since they share the same animation-duration
of 2 seconds.
## Tests
```yml
tests:
- text: The value of the animation-timing-function
property for the element with the id ball1
should be linear.
testString: assert($('#ball1').css('animation-timing-function') == 'linear', 'The value of the animation-timing-function
property for the element with the id ball1
should be linear.');
- text: The value of the animation-timing-function
property for the element with the id ball2
should be ease-out.
testString: assert($('#ball2').css('animation-timing-function') == 'ease-out', 'The value of the animation-timing-function
property for the element with the id ball2
should be ease-out.');
```
## Challenge Seed
## Solution
```js
// solution required
```