無法用 javascript 觸發 css animation

Question

我試圖讓一個 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>

我可以只使用 css 來設置它的動畫，但它每次都會運行，我希望它以一個按鈕開始。

Answer 1

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

 var stars = document.getElementById("stars"); function myMove() { stars.style.animation ="stars 2s linear infinite"; } function stop() { stars.style.animation ="none"; }

 #container { width: 100%; height: 500px; position: relative; overflow:hidden; background-color:black; border-radius:10px; } #item { width: 100px; height: 500px; 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);} }

 <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> </body>

無法用 javascript 觸發 css animation

問題描述

1 個解決方案

解決方案1
1 已采納 2020-10-25 08:24:10

無法用 javascript 觸發 css animation

問題描述

1 個解決方案

解決方案1 1 已采納 2020-10-25 08:24:10

解決方案1
1 已采納 2020-10-25 08:24:10