CSS 动画不显示答案

【问题标题】：CSS Animation Wont DisplayCSS 动画不显示
【发布时间】：2021-02-27 08:50:03
【问题描述】：

所以基本上我是在尝试用 HTML 制作一个 javascript 游戏（我擅长 HTML，但不擅长其他语言，所以当这个问题发生时我很困惑）

所以我确保语法正确，确实如此。然后在互联网上进行了一些搜索，但它没有帮助动画只是不会显示。我尝试了很多次，但它只是。不会

如果你想检查它，这里是 HTML 代码。

#game {
  width: 500px;
  height: 200px;
  border: 1px solid;
  border-color: black;
  border-radius: 7px;
}

#player {
  width: 20px;
  height: 50px;
  background-color: red;
  position: relative;
  top: 150px;
}

#brick {
  width: 20px;
  height: 20px;
  background-color: blue;
  position: relative;
  top: 130px;
  left: 480px;
  animation: block 5s is infinite;
}

@keyframes block {
  0% {
    left: 480px;
  }
  100% {
    left: 40px;
  }
}

<html>

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="css/style.css">
  <title>
    javascript game!
  </title>
</head>

<body>
  <div id="game">
    <div id="player">

    </div>
    <div id="brick">

    </div>
  </div>
</body>

</html>

是的。提前谢谢

【问题讨论】：

标签： css css-animations keyframe

【解决方案1】：

虽然您说您已检查语法是否正确，但您的开发工具中的 css 上应该会显示一个“无效属性值”，用于设置#brick 的动画。

里面有一个“是”。也许你的意思是 1 或者你不打算让它在那里？

这是没有它的 sn-p：

<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="css/style.css">
        <title>
            javascript game!
        </title>
        <style>
        #game {
    width:500px;
    height:200px;
    border: 1px solid ;
    border-color: black;
    border-radius: 7px;
}
#player {
    width: 20px;
    height: 50px;
    background-color: red;
    position: relative;
    top: 150px;
}
#brick {
    width: 20px;
    height: 20px;
    background-color: blue;
    position: relative;
    top: 130px;
    left: 480px;
    animation: block 5s infinite;
}

@keyframes block {
    0%{left:480px;}
    100%{left:40px;}
  }
  </style>
    </head>
    <body>
        <div id="game">
            <div id="player">
                
            </div>
            <div id="brick">
                
            </div>
        </div>
    </body>
</html>

顺便说一句，您可能会发现（处理器）使用 transform translateX 比在动画中重置左侧位置更有效。

【讨论】：

【解决方案2】：

改变不同的动画属性然后它工作。喜欢animation-name: block;animation-duration: 5s;animation-iteration-count: infinite;

#game {
    width:500px;
    height:200px;
    border: 1px solid ;
    border-color: black;
    border-radius: 7px;
}
#player {
    width: 20px;
    height: 50px;
    background-color: red;
    position: relative;
    top: 150px;
}
#brick {
    width: 20px;
    height: 20px;
    background-color: blue;
    position: relative;
    top: 130px;
    left:0;
    animation-name: block;
    animation-duration: 5s;
    animation-iteration-count: infinite;
}

@keyframes block {
    0%{left:480px;}
    100%{left:40px;}
  }

<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="css/style.css">
        <title>
            javascript game!
        </title>
    </head>
    <body>
        <div id="game">
            <div id="player">
                
            </div>
            <div id="brick">
                
            </div>
        </div>
    </body>
</html>

【讨论】：

【解决方案3】：

#game {
    width:500px;
    height:200px;
    border: 1px solid ;
    border-color: black;
    border-radius: 7px;
}
#player {
    width: 20px;
    height: 50px;
    background-color: red;
    position: relative;
    top: 150px;
}
#brick {
    width: 20px;
    height: 20px;
    background-color: blue;
    position: relative;
    top: 130px;
    left: 480px;
 animation: block 5s infinite;
}

@keyframes block {
    0%{left:480px;}
    100%{left:40px;}
  }

您的代码有一点问题，就是在动画属性中使用了“is”

【讨论】：

谢谢，我关注的 youtube 教程在里面，所以我认为它是正确的