悬停时颜色不停变化

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;


}

- Diana Pérez

---

当鼠标进入元素的div时，您希望过渡无限运行，在颜色之间不停地变化吗？请澄清您的请求... - repzero

Answer 1

你可以使用CSS关键帧来实现这个。

@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>

- Ryan Little

---

当然，这是解决方案吗？ - Ryan Little

Answer 2

你可以使用 CSS 动画（关键帧）来实现这个效果。阅读 此处 了解更多信息。

.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;
}
@keyframes hoverme {
  0% {
    background-color: #900;
  }
  25% {
    background-color: red;
  }
  50% {
    background-color: green;
  }
  25% {
    background-color: red;
  }
  100% {
    background-color: #900;
  }
}
.box:hover {
  animation: hoverme 3s infinite;
}

<div class="box">
  Hover me :)
</div>

- Jinu Kurian