Why isn't my Javascript animating this text for color change?

Not sure why this isn't resulting in color change animation on the successful result. I was just playing around with some animation for the first time and I can't figure out why this won't work. Thanks in advance!

HTML

<p>Roll two dice and see if they align:</p>  <p id="answerSpace"></p>  

CSS

    #answerSpace {    font-size: 52px;    padding-top: 0px;    display: block;    margin: auto;  }    p{    padding-top: 0px;    padding-bottom: 0px;    display: inline-block;    margin: auto;  }    @keyframes color-change {    0% { color: red; }    50% { color: blue; }    100% { color: red; }  }  

Javascript

const randomNum = num => {    let answer = Math.floor(Math.random() * Math.floor(num))    return answer;    };    const compareRolls = () => {    let firstRoll = randomNum(6); console.log("first roll: " + firstRoll);  let secondRoll = randomNum(6); console.log("second roll: " + secondRoll);    if (firstRoll === secondRoll){  a = true; result = "You did it!" + ` Two ${firstRoll}s!`}else{  a=false; result ="nope."}    console.log(a);    let space = document.getElementById("answerSpace");  if (a == true){space.style.animation = "color-change 1s infinite;"}    space.innerHTML = result;    };    compareRolls();  

https://stackoverflow.com/questions/65837413/why-isnt-my-javascript-animating-this-text-for-color-change January 22, 2021 at 07:46AM