CSS，如何在一段时间后更改背景并保持这种状态[重复]

Question

当我运行它时，颜色会在 5 秒后改变，但在 5 秒后它会变回白色，但我希望它保持 #1b1b1b

.bg {
  -webkit-animation: change-color 5s; /* Safari 4+ */
  -moz-animation:    change-color 5s; /* Fx 5+ */
  -o-animation:      change-color 5s; /* Opera 12+ */
  animation:         change-color 5s; /* IE 10+ */
}

和

@-webkit-keyframes change-color {
 from {
        background: White;
 }
 to {
        background: #1b1b1b;
 }
}
(I also use -moz-animation etc)

Answer 1

只需在动画声明中添加forwards：

.bg {
  height: 400px;
  width: 400px;
  -webkit-animation: change-color 5s forwards;
  /* Safari 4+ */
  -moz-animation: change-color 5s forwards;
  /* Fx 5+ */
  -o-animation: change-color 5s forwards;
  /* Opera 12+ */
  animation: change-color 5s forwards;
  /* IE 10+ */
}

@-webkit-keyframes change-color {
  from {
    background: white;
  }
  to {
    background: #1b1b1b;
  }
}

<div class="bg"></div>

请注意background: White 无效，但background: white 无效。

Answer 2

使用简单的transition。

body {
    background: red;
    transition: background 5s linear;
}

.recolor {
    background: black;
}

将recolor 类添加到body 会将颜色从red 更改为black。