I'm having trouble getting a CSS animation to trigger with a button press using Javascript. I've gone through various questions and answers, but nothing seems to work. My code looks like it should do the trick -- what am I missing? When I click the button, I expect the background color of a specified div to change over 2 seconds to light blue. I've attempted changing the color of both the Body and Test div, but nothing happens. The alert() function is working fine, which adds to my confusion as it's in the same function as the colorChange script.
<!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>