---
id: 587d78a8367417b2b2512ae5
title: Animate Elements at Variable Rates
challengeType: 0
videoUrl: ''
localeTitle: 以可变速率动画元素
---
## Description
有多种方法可以改变类似动画元素的动画速率。到目前为止,这是通过应用animation-iteration-count
属性和设置@keyframes
规则来实现的。为了说明,右侧的动画由两个“星星”组成,每个“星星”的大小和不透明度在@keyframes
规则中的20%标记处@keyframes
,从而创建闪烁动画。您可以更改其中一个元素的@keyframes
规则,以便星星以不同的速率闪烁。
## Instructions
通过将其@keyframes
规则更改为50%,更改类名为star-1
的元素的动画速率。
## Tests
```yml
tests:
- text: star-1
类的@keyframes
规则应为50%。
testString: 'assert(code.match(/twinkle-1\s*?{\s*?50%/g), "The @keyframes
rule for the star-1
class should be 50%.");'
```
## Challenge Seed
## Solution
```js
// solution required
```