CSS animation-fill-mode动画填充模式

学习最好的方法就是把你知道的告诉别人

我们在使用动画的时候，当动画完成时，元素会恢复原来的模样，这时怎么办？

使用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;
  /* 动画填充模式为forwards */
    animation-fill-mode: forwards;
  }
  @keyframes background-color {
    100% {
      background-color: #4791d0;
    }
  }
</style>
<button>注册</button>