保持 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时，即使在动画完成后元素也会保留最后一个关键帧的状态。在这里，您没有在最后一个关键帧（即 100% 帧）中为 background-color 或 color 设置值，因此它返回到为元素（默认或未悬停状态）。如果您希望它保持 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>

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

Maintain last color change in CSS Keyframe

html

css

keyframe

css-animations