随时间改变div的背景颜色

Question

我在我的css中有这个div：

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

     

动画填充模式CSS属性指定CSS动画在执行之前和之后应如何将样式应用于目标。

     

＆＃34;的转发＆＃34;

     

目标将保留执行期间遇到的最后一个关键帧设置的计算值。最后一个关键帧取决于animation-direction和animation-iteration-count的值：

＆＃13;

＆＃13;

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;
  }
}

＆＃13;

<div></div>

＆＃13;

＆＃13;

＆＃13;