---
id: 58a7a6ebf9a6318348e2d5aa
title: Modify Fill Mode of an Animation
challengeType: 0
videoUrl: 'https://scrimba.com/c/cVJDmcE'
---
## Description
That's great, but it doesn't work right yet. Notice how the animation resets after 500ms
has passed, causing the button to revert back to the original color. You want the button to stay highlighted.
This can be done by setting the animation-fill-mode
property to forwards
. The animation-fill-mode
specifies the style applied to an element when the animation has finished. You can set it like so:
animation-fill-mode: forwards;
## Instructions
Set the animation-fill-mode
property of button:hover
to forwards
so the button stays highlighted when a user hovers over it.
## Tests
```yml
tests:
- text: button:hover
should have a animation-fill-mode
property with a value of forwards
.
testString: assert(code.match(/button\s*?:\s*?hover\s*?{[\s\S]*animation-fill-mode\s*?:\s*?forwards\s*?;[\s\S]*}/gi) && code.match(/button\s*?:\s*?hover\s*?{[\s\S]*animation-name\s*?:\s*?background-color\s*?;[\s\S]*}/gi) && code.match(/button\s*?:\s*?hover\s*?{[\s\S]*animation-duration\s*?:\s*?500ms\s*?;[\s\S]*}/gi), 'button:hover
should have a animation-fill-mode
property with a value of forwards
.');
```
## Challenge Seed
## Solution
```js
var code = "button:hover {animation-name: background-color; animation-duration: 500ms; animation-fill-mode: forwards;}"
```