CSS关键帧和动画将无法在Google Chrome或Firefox上运行

如何解决CSS关键帧和动画将无法在Google Chrome或Firefox上运行

我正在尝试重新创建Internet断开时使用Google Chrome浏览器的“跳跃”游戏。我试图遵循文档和在线视频，但是无论如何我都无法使CSS代码的动画效果生效。我已经在Codeply中进行了测试，因此无法正常运行。我试图查看供应商前缀，但这些前缀似乎也无济于事。我已经在Google Chrome和Fire fox上进行了测试，它们都是最新的。有什么建议吗？

我在下面附上了CSS代码。

 * {
  padding: 0;
  margin: 0;
}
#game{
  width:700px;
  height:200px;
  border: 1px solid black;
}
#character{
  width:20px;
  height: 50px;
  background-color: red;
  position: relative;
  top: 150px;
}
#block{
  width:20px;
  height: 20px;
  background-color: blue;
  position: relative;
  top: 130px;
  left: 480px;
  -webkit-animation: block ls infinite linear;
}
@-webkit-keyfames block
{
  0% { left: 480px; }
  100% { left: -40px; }
}

解决方法

您需要声明默认的关键帧规则，而不仅仅是Webkit前缀。

#block{
  width:20px;
  height: 20px;
  background-color: blue;
  position: relative;
  top: 130px;
  left: 480px;
  animation: block 1s infinite linear;
  -webkit-animation: block 1s infinite linear;
}
@keyframes block {
  0% { left: 480px; }
  100% { left: -40px; }
}
@-webkit-keyframes block
{
  0% { left: 480px; }
  100% { left: -40px; }
}

另外，您在-webkit-animation上的时间是小写的L，我想您打算在其中输入1。

编辑：关键帧也被拼写错误，如@disinfor指出的那样，该动画可以在Chrome和FF中运行，而无需使用默认的@ keyframes / animation规则，也可以使用默认值且不带前缀，这纯粹是一个拼写错误问题。>