---
id: 587d78a7367417b2b2512ae0
title: Use CSS Animation to Change the Hover State of a Button
challengeType: 0
videoUrl: ''
localeTitle: 使用CSS动画更改按钮的悬停状态
---
## Description
您可以使用CSS @keyframes
更改悬停状态下按钮的颜色。以下是在悬停时更改图像宽度的示例: <风格>
img:hover {
动画名称:宽度;
动画持续时间:500ms;
}
@keyframes width {
100%{
宽度:40px;
}
}
</样式>
<img src =“https://bit.ly/smallgooglelogo"alt =”Google的徽标“/>
## Instructions
请注意, ms
表示毫秒,其中1000毫秒等于1秒。使用CSS @keyframes
更改button
元素的background-color
,以便当用户将鼠标悬停在其上时变为#4791d0
。 @keyframes
规则应该只有100%
的条目。
## Tests
```yml
tests:
- text: '@keyframes规则应使用animation-name
background-color。'
testString: 'assert(code.match(/@keyframes\s+?background-color\s*?{/g), "The @keyframes rule should use the animation-name
background-color.");'
- text: '@keyframes
下应该有一条规则将background-color
更改为#4791d0
为100%。'
testString: 'assert(code.match(/100%\s*?{\s*?background-color:\s*?#4791d0;\s*?}/gi), "There should be one rule under @keyframes
that changes the background-color
to #4791d0
at 100%.");'
```
## Challenge Seed
## Solution
```js
// solution required
```