Is there a way to receive an alert when the div with the class name "earth" reaches 100% on the left side, without using jQuery? I attempted to utilize setTimeout but I am looking for an alternative method that does not rely on time, but rather on position.
<!DOCTYPE html>
<html>
<head>
<style>
.earth {
position :relative;
animation:move 10s linear;
background:red;
height:20px;
width:20px;
}
@-webkit-keyframes move
{
from { left: 0%; }
to { left: 100%; }
}
</style>
<script>
function changetext () {
document.getElementById("demo").style.color = "red";
animation();
}
function animation() {
document.getElementById('ghost').className ='earth';
}
function repeat() {
var sd = document.getElementById("ghost").className = 'earth';
sd.style.display = 'none';
}
</script>
</head>
<body>
<div class="something"></div>
<div id="ghost"> </div>
<p onclick="changetext();" id="demo"> HELLO WORLD </p>
</body>
</html>