Cant trigger a css animation with javascript

Question

Im trying to make a div move to the left and trigger it with javascript, im pretty sure I got everything correctly but it doesnt work. Here is the code:

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

I can just use css to animate it but it will run everytime and i wanted it to start with a button.

Rio A.P · Accepted Answer · 2020-10-25 08:24:10Z

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>

Collectives™ on Stack Overflow

Cant trigger a css animation with javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related