Attempting to create a left-moving div triggered by JavaScript, everything appears correct but it's not functioning properly. Here's 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>JavaScript Animation</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>
Using CSS alone will animate it continuously; desired to start animation with a button click.