FCC---Use CSS Animation to Change the Hover State of a Button---鼠标移过，背景色变色，用0.5s的动画制作

You can use CSS @keyframes to change the color of a button in its hover state.

Here's an example of changing the width of an image on hover:

如下是鼠标移过图片，宽度变化的小动画

<style>
  img:hover {
    animation-name: width;
    animation-duration: 500ms;
  }

  @keyframes width {
    100% {
      width: 40px;
    }
  }
</style>

<img src="https://bit.ly/smallgooglelogo" alt="Google's Logo" />

 

练习题目：

Note that ms stands for milliseconds, where 1000ms is equal to 1s.

Use CSS @keyframes to change the background-color of the button element so it becomes #4791d0 when a user hovers over it.

The @keyframes rule should only have an entry for 100%.

 

练习代码：

<style>
  button {
    border-radius: 5px;
    color: white;
    background-color: #0F5897;
    padding: 5px 10px 8px 10px;
  }

  button:hover {
    animation-name: background-color;
    animation-duration: 500ms;
  }
  @keyframes background-color {
    100% {
      background-color: #4791d0;
    }
  }
</style>
<button>Register</button>

 

效果如下：

无

 

 

问题: 

因为持续时间只设置了0.5s，所以动画结束，按钮的颜色就变暗了。

如果希望鼠标放在上面，按钮一直保持高亮

通过如下设置，可以改进：

 

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;

 

所以添加后代码：

<style>
  button {
    border-radius: 5px;
    color: white;
    background-color: #0F5897;
    padding: 5px 10px 8px 10px;
  }
  button:hover {
    animation-name: background-color;
    animation-duration: 500ms;
    /* add your code below this line */
    animation-fill-mode: forwards;
    /* add your code above this line */
  }
  @keyframes background-color {
    100% {
      background-color: #4791d0;
    }
  }
</style>
<button>Register</button>