随时间改变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动画在执行之前和之后应如何将样式应用于其目标.

" 前锋 "

目标将保留由执行期间遇到的最后一个关键帧设置的计算值.最后一个关键帧取决于animation-direction和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>