让球变色

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 移出您的球样式（除非您使用 CSS 预处理器，例如 SASS...）

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

在使用 SCSS 的同时，您可以：jsFiddle example

让球变色

Making the Ball Change Color

css

responsive