html - 悬停时不间断的颜色变化

Question

我需要自动改变元素的颜色无限运行，下面的代码实现了我想要的效果，但只有当鼠标经过元素(div)时。我怎样才能让它始终改变颜色？

感谢和问候。

.box{
background-color: #900;
height: 50px;
width: 100px;
padding: 1em;
color: #fff;
font-weight: bold;
transition:background-color 3s linear;
-webkit-transition:background-color 3s linear;
-o-transition: background-color 3s linear;
-moz-transition: background-color 3s linear;
-ms-transition: background-color 3s linear;

}

.box:hover{
background-color: #090;


}

Answer 1

您可以使用 CSS keyframes 执行此操作.

@keyframes changeColor {
  0% {
    background-color: #900;
  }
  50% {
    background-color: #090;
  }
  100% {
    background-color: #900;
  }
}
.box {
  animation-name: changeColor;
  animation-iteration-count: infinite;
  animation-duration: 3s;
  background-color: #900;
  height: 50px;
  width: 100px;
  padding: 1em;
  color: #fff;
  font-weight: bold;
}

<div class="box"></div>