---
id: 58a7a6ebf9a6318348e2d5aa
title: Modify Fill Mode of an Animation
challengeType: 0
videoUrl: ''
localeTitle: 修改动画的填充模式
---
## Description
这很好,但它还不能正常工作。注意动画在500ms
过后如何重置,导致按钮恢复为原始颜色。您希望按钮保持突出显示。这可以通过设置来完成animation-fill-mode
属性forwards
。 animation-fill-mode
指定动画完成时应用于元素的样式。您可以这样设置: animation-fill-mode: forwards;
## Instructions
设置button:hover
的animation-fill-mode
属性button:hover
to forwards
以便当用户将鼠标悬停在按钮上时按钮保持突出显示。
## Tests
```yml
tests:
- text: 'button:hover
应该具有值为forwards
的animation-fill-mode
属性。'
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
```