---
id: 587d78a8367417b2b2512ae6
title: Animate Multiple Elements at Variable Rates
challengeType: 0
videoUrl: 'https://scrimba.com/c/cnpWZc9'
---
## Description
In the previous challenge, you changed the animation rates for two similarly animated elements by altering their @keyframes
rules. You can achieve the same goal by manipulating the animation-duration
of multiple elements.
In the animation running in the code editor, there are three "stars" in the sky that twinkle at the same rate on a continuous loop. To make them twinkle at different rates, you can set the animation-duration
property to different values for each element.
## Instructions
Set the animation-duration
of the elements with the classes star-1
, star-2
, and star-3
to 1s, 0.9s, and 1.1s, respectively.
## Tests
```yml
tests:
- text: The animation-duration
property for the star with class star-1
should remain at 1s.
testString: assert($('.star-1').css('animation-duration') == '1s', 'The animation-duration
property for the star with class star-1
should remain at 1s.');
- text: The animation-duration
property for the star with class star-2
should be 0.9s.
testString: assert($('.star-2').css('animation-duration') == '0.9s', 'The animation-duration
property for the star with class star-2
should be 0.9s.');
- text: The animation-duration
property for the star with class star-3
should be 1.1s.
testString: assert($('.star-3').css('animation-duration') == '1.1s', 'The animation-duration
property for the star with class star-3
should be 1.1s.');
```
## Challenge Seed
## Solution
```js
// solution required
```