无法使用javascript触发css动画_Javascript_Html_Css_Animation

无法使用javascript触发css动画

javascript html css animation

无法使用javascript触发css动画,javascript,html,css,animation,Javascript,Html,Css,Animation,我试着让div向左移动，并用javascript触发它，我很确定我得到的一切都是正确的，但它不起作用。代码如下： <html> <head> <style> #container { width: 100%; height: 500px; position: relative; overflow:hidden; background-color:black; border-radius:10px; } #item { wi

我试着让div向左移动，并用javascript触发它，我很确定我得到的一切都是正确的，但它不起作用。代码如下：

<html>
<head>  
<style>
#container {
  width: 100%;
  height: 500px;
  position: relative;
  overflow:hidden;
  background-color:black;
  border-radius:10px;
}
#item {
    width: 100px;
    height: 100px;
    position: absolute;
    border-radius:10px;
    overflow:hidden;
}
#stars {
    width: 200%;
    height: 500px;
    position: absolute;
    background-image: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%);
    display:block;
    background-size:contain;
    bottom:0;
    left:0;
    right:0;
    z-index:1;
    background-repeat:repeat-x;
}
h1 {
  font-family: montserrat;
}
@keyframes stars{
    100%{transform:translateX(-1200px);}
}
</style>
</head>
<body bgcolor=white>
<h1>Animasi javascript</h1>
    <p>
        <button onclick="myMove()">Animate</button> 
        <button onclick="stop()">Stop</button> 
    </p>
<div id ="container">
    <div id="stars"></div>
</div>
<script>
    function myMove() {
var stars = document.getElementById=("stars");
stars.style.animation ="stars 10s linear infinite";
}
</script>
</body>
</html>


#容器{
宽度：100%；
高度：500px；
位置：相对位置；
溢出：隐藏；
背景色：黑色；
边界半径：10px；
}
#项目{
宽度：100px；
高度：100px；
位置：绝对位置；
边界半径：10px；
溢出：隐藏；
}
#明星{
宽度：200%；
高度：500px；
位置：绝对位置；
背景图像：线性梯度（90度，rgba（2,0,36,1）0%，rgba（9,9121,1）35%，rgba（0212255,1）100%）；
显示：块；
背景尺寸：包含；
底部：0；
左：0；
右：0；
z指数：1；
背景重复：重复-x；
}
h1{
字体系列：蒙特塞拉特；
}
@为星星设置关键帧{
100%{transform:translateX（-1200px）；}
}
动画javascript

使有生气
停止

函数myMove（）{
var stars=document.getElementById=（“stars”）；
stars.style.animation=“stars 10s linear infinite”；
}

我可以用css来制作动画，但它每次都会运行，我希望它从一个按钮开始

var stars = document.getElementById=("stars"); <-- remove "="
var stars = document.getElementById("stars");

#容器{
宽度：100%；
高度：500px；
位置：相对位置；
溢出：隐藏；
背景色：黑色；
边界半径：10px；
}
#项目{
宽度：100px；
高度：500px；
位置：绝对位置；
边界半径：10px；
溢出：隐藏；
}
#明星{
宽度：200%；
高度：500px；
位置：绝对位置；
背景图像：线性梯度（90度，rgba（2,0,36,1）0%，rgba（9,9121,1）35%，rgba（0212255,1）100%）；
显示：块；
背景尺寸：包含；
底部：0；
左：0；
右：0；
z指数：1；
背景重复：重复-x；
}
h1{
字体系列：蒙特塞拉特；
}
@为星星设置关键帧{
100%{transform:translateX（-1200px）；}
}


动画javascript

使有生气
停止