I'm trying to trigger a CSS animation with a button press by using Javascript. I've used other question and answers here, but to no avail. My code seems like it should work -- what am I missing? When I click the button, the background color of the div which I specify should change color over 2 seconds to light blue. I've tried changing the color of both my Body and my Test div, but nothing changes. My alert() triggers, which is confusing as it is in the same function as my colorChange.
<!DOCTYPE html>
<html lang="en">
<head>
<title><model-viewer> example</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script>
function colorChange() {
alert("The button works");
document.getElementByID('test').style.animation="changeColor";
}
</script>
<style>
body {
background-color: darkblue;
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-o-transition: all 2s ease;
-ms-transition: all 2s ease;
transition: all 2s ease;
}
.test {
width: 500px;
height: 500px;
background-color: pink;
}
@keyframes changeColor {
to {
background-color: lightblue;
}
}
</style>
</head>
<body id="body">
<div class="test"></div>
<button id="button" onclick="colorChange()">test animation</button>
</body>
</html>
