javascript - 随时间改变div的背景颜色

Question

我的 div 的 css 中有这个:

div {
  background-color: white;
  -webkit-animation-name: colorChange;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-duration: 100s;
}

@-webkit-keyframes colorChange {
  0% {
    background-color: white;
  }
  50% {
    background-color: yellow;
  }
  100% {
    background-color: red;
  }
}

唯一的问题是我需要 div 在转换完成后保持红色，而不是之后回到初始的白色。在 jquery 中有什么建议或者更好的方法来完成这个吗？

我真的很想说“5 分钟后变为黄色，再过 5 分钟后变为红色并保持红色”，而不是像这样进行过渡。

Answer 1

使用animation-fill-mode:forwards

animation-fill-mode

The animation-fill-mode CSS property specifies how a CSS animation should apply styles to its target before and after its execution.

"forwards"

The target will retain the computed values set by the last keyframe encountered during execution. The last keyframe depends on the value of animation-direction and animation-iteration-count:

div {
  height: 100px;
  width: 100px;
  border: 1px solid grey;
  margin: 1em auto;
  background-color: white;
  animation-name: colorChange;
  animation-iteration-count: 1;
  animation-duration: 3s;
  animation-fill-mode: forwards;
}

@-webkit-keyframes colorChange {
  0% {
    background-color: white;
  }
  50% {
    background-color: yellow;
  }
  100% {
    background-color: red;
  }
}

<div></div>