2018-09-30 22:01:58 +00:00
---
id: 58a7a6ebf9a6318348e2d5aa
title: Modify Fill Mode of an Animation
challengeType: 0
videoUrl: 'https://scrimba.com/c/cVJDmcE'
2019-08-05 16:17:33 +00:00
forumTopicId: 301064
2021-01-13 02:31:00 +00:00
dashedName: modify-fill-mode-of-an-animation
2018-09-30 22:01:58 +00:00
---
2020-11-27 18:02:05 +00:00
# --description--
2018-09-30 22:01:58 +00:00
2020-11-27 18:02:05 +00:00
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.
2018-09-30 22:01:58 +00:00
2020-11-27 18:02:05 +00:00
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:
2018-09-30 22:01:58 +00:00
2020-11-27 18:02:05 +00:00
`animation-fill-mode: forwards;`
2018-09-30 22:01:58 +00:00
2020-11-27 18:02:05 +00:00
# --instructions--
Set the `animation-fill-mode` property of `button:hover` to `forwards` so the button stays highlighted when a user hovers over it.
# --hints--
2018-09-30 22:01:58 +00:00
2020-11-27 18:02:05 +00:00
`button:hover` should have a `animation-fill-mode` property with a value of `forwards` .
2018-09-30 22:01:58 +00:00
2020-11-27 18:02:05 +00:00
```js
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
)
);
```
# --seed--
2018-09-30 22:01:58 +00:00
2020-11-27 18:02:05 +00:00
## --seed-contents--
2018-09-30 22:01:58 +00:00
```html
< style >
button {
border-radius: 5px;
color: white;
background-color: #0F5897 ;
padding: 5px 10px 8px 10px;
}
button:hover {
animation-name: background-color;
animation-duration: 500ms;
2020-02-27 15:20:46 +00:00
/* Only change code below this line */
2018-10-08 00:01:53 +00:00
2020-02-27 15:20:46 +00:00
/* Only change code above this line */
2018-09-30 22:01:58 +00:00
}
@keyframes background-color {
100% {
background-color: #4791d0 ;
}
}
< / style >
< button > Register< / button >
```
2020-11-27 18:02:05 +00:00
# --solutions--
2018-09-30 22:01:58 +00:00
2019-04-28 18:13:38 +00:00
```html
< style >
button {
border-radius: 5px;
color: white;
background-color: #0F5897 ;
padding: 5px 10px 8px 10px;
}
button:hover {
animation-name: background-color;
animation-duration: 500ms;
animation-fill-mode: forwards;
}
@keyframes background-color {
100% {
background-color: #4791d0 ;
}
}
< / style >
< button > Register< / button >
2018-09-30 22:01:58 +00:00
```