保持 CSS 关键帧中最后的颜色变化

Question

所以我制作了一个带有关键帧的 CSS 动画，其中元素的背景颜色和字体颜色发生变化。问题是，当到达最后一帧时，颜色会重置为默认颜色。我使用了它animation-fill-mode，它有助于保持最终尺寸，但颜色仍然重置？这是代码：

@keyframes anim{
  0% {background-color: #404880; color: #DCE0F7;}
  90% {background-color: #747AA6; color: #242D5E;}
  100% {font-size: 19px;}
}
.apply{
  font-size: 15px;
  background-color: #404880;
  border-radius: 5px;
  border-style: none;
  color: #DCE0F7;
}
.apply:hover{
  animation: anim;
  animation-duration: .5s;
  -webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/
  -moz-animation-fill-mode:forwards; /*FF 5+*/
  -o-animation-fill-mode:forwards; /*Not implemented yet*/
  -ms-animation-fill-mode:forwards; /*IE 10+*/
  animation-fill-mode:forwards; /*when the spec is finished*/
}

Answer 1

当您设置 时animation-fill-mode: forwards，即使动画完成后，元素也会保留最后一个关键帧的状态。在这里，您没有在最后一个关键帧（即帧）中设置background-color或 的值，因此它会返回到为元素提供的原始值（默认或未悬停状态）。如果您希望它保留帧中的状态，那么属性及其值也应该转移到帧中（即使没有更改）。color100%90%100%

出于与上面提到的完全相同的原因，您不需要0%在设置中使用框架，因为它具有与元素的默认状态相同的值。0%通常只有当动画开始时的状态需要与默认状态不同时才需要该帧。

@keyframes anim {
  90% {
    background-color: #747AA6;
    color: #242D5E;
  }
  100% {
    font-size: 19px;
    background-color: #747AA6;
    color: #242D5E;    
  }
}
.apply {
  font-size: 15px;
  background-color: #404880;
  border-radius: 5px;
  border-style: none;
  color: #DCE0F7;
}
.apply:hover {
  animation: anim;
  animation-duration: .5s;
  animation-fill-mode: forwards;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class='apply'>Test content</div>