---
id: 587d78a8367417b2b2512ae6
title: Animate Multiple Elements at Variable Rates
challengeType: 0
videoUrl: ''
localeTitle: 以可变速率动画多个元素
---
## Description
在之前的挑战中,您通过更改其@keyframes
规则来更改两个相似动画元素的动画速率。您可以通过操纵多个元素的animation-duration
来实现相同的目标。在代码编辑器中运行的动画中,天空中有三个“星星”在连续循环中以相同的速率闪烁。要使它们以不同的速率闪烁,可以将animation-duration
属性设置为每个元素的不同值。
## Instructions
将类别为star-1
, star-2
和star-3
的元素的animation-duration
设置为1s,0.9s和1.1s。
## Tests
```yml
tests:
- text: 具有star-1
的星的animation-duration
属性应保持为1秒。
testString: 'assert($(".star-1").css("animation-duration") == "1s", "The animation-duration
property for the star with class star-1
should remain at 1s.");'
- text: star-2
的星的animation-duration
属性应为0.9秒。
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: star-3
的星的animation-duration
属性应为1.1秒。
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
```