Question

这是一个相对简单的问题，但是我似乎看不到我在做什么错。我只希望球在0％，％50和％100标记处从红色，蓝色变为黄色。目前我看不到任何变化。

感谢您的帮助，

安娜

#ball {
  background-color: red;
  height: 50px;
  width:50px;
  border-radius: 50%;
  animation-name: ball;
  animation-duration: 4s;

  @keyframes ball{
    0% {
      background-color: red;
    }

    50% {
      background-color: blue;
    }

    100% {
      background-color: yellow;
    }
  }
}

<html>
  <body>
    <div id="ball">
  </div>
  </body>
</html>

Answer 1

将@keyframes移出您的球形样式（除非您使用SASS之类的CSS预处理器...）

#ball {
  background-color: red;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  animation-name: ball;
  animation-duration: 4s;
}

@keyframes ball {
  0% {
    background-color: red;
  }
  50% {
    background-color: blue;
  }
  100% {
    background-color: yellow;
  }
}

<div id="ball"></div>

相反，您可以使用jsFiddle example

使球变色

1 个答案: