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帧）中的color或100%设置值，因此它会返回到为此提供的原始值element（默认或非悬停状态）。如果您希望它保持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关键帧中的最后一个颜色更改

1 个答案: