---
id: 58a7a6ebf9a6318348e2d5aa
title: Modify Fill Mode of an Animation
challengeType: 0
videoUrl: ''
localeTitle: Modificar o modo de preenchimento de uma animação
---
## Description
Isso é ótimo, mas não funciona direito ainda. Observe como a animação é redefinida após a passagem de 500ms
, fazendo com que o botão retorne à cor original. Você quer que o botão fique em destaque. Isso pode ser feito configurando a propriedade animation-fill-mode
como forwards
. O animation-fill-mode
especifica o estilo aplicado a um elemento quando a animação termina. Você pode configurá-lo assim: animation-fill-mode: forwards;
## Instructions
Defina a propriedade de animation-fill-mode
do button:hover
para forwards
para que o botão permaneça realçado quando um usuário passar por cima dele.
## Tests
```yml
tests:
- text: 'button:hover
deve ter uma propriedade de animation-fill-mode
com um valor de 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
// solution required
```