---
id: 587d78a8367417b2b2512ae5
title: Animate Elements at Variable Rates
challengeType: 0
videoUrl: 'https://scrimba.com/c/cZ89WA4'
---
## Description
There are a variety of ways to alter the animation rates of similarly animated elements. So far, this has been achieved by applying an animation-iteration-count
property and setting @keyframes
rules.
To illustrate, the animation on the right consists of two "stars" that each decrease in size and opacity at the 20% mark in the @keyframes
rule, which creates the twinkle animation. You can change the @keyframes
rule for one of the elements so the stars twinkle at different rates.
## Instructions
Alter the animation rate for the element with the class name of star-1
by changing its @keyframes
rule to 50%.
## Tests
```yml
tests:
- text: The @keyframes
rule for the star-1
class should be 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