为什么不是'；我的Javascript不能为颜色更改设置此文本的动画吗？

不知道为什么这不会导致动画上颜色变化的成功结果。我第一次只是在玩一些动画，我不明白为什么这样不行。提前谢谢

HTML

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();

---

您的CSS中有一个分号，这导致了一个错误

const randomNum=num=>{
让答案=Math.floor（Math.random（）*Math.floor（num））
返回答案；
};
const compareRolls=（）=>{
让firstRoll=randomNum（6）；console.log（“first roll:+firstRoll”）；
让secondRoll=randomNum（6）；console.log（“第二卷：+secondRoll”）；
如果（第一卷===第二卷）{
a=true；result=“你做到了！”+`Two${firstRoll}s！`}否则{a=false；result=“nope.”
控制台日志（a）；
let space=document.getElementById（“answerSpace”）；
如果（a==true）{
space.style.animation=“1s ease 0s infinite normal none running color change”；
}
space.innerHTML=结果；
};
compareRolls（）
#应答空间{
字体大小：52px；
填充顶部：0px；
显示：块；
保证金：自动；
}
p{
填充顶部：0px；
垫底：0px；
显示：内联块；
保证金：自动；
}
@关键帧颜色更改{
0%{颜色：红色；}
50%{颜色：蓝色；}
100%{颜色：红色；}
}
掷两个骰子，看它们是否对齐：

如果删除Javascript并将html设置为应该设置动画时的状态，是否有效？这是确定问题所在的第一步。是的，是的，很抱歉我没有提到。在这种情况下，请用你的逻辑做一个解释。我们需要更多的上下文来解释这个问题，特别是当逻辑与标记相关时。你能提供一个codesandbox示例吗？你提供的js代码无效。这里有一个问题：这行吗？我想是的，space.style.animation中的分号导致了问题谢谢！我觉得有点傻，但我想这是真的。@Richard你能把我的帖子标记为答案吗upvote@lifeiscontent哦，很抱歉。我是新来的。我就这么做了！再次感谢！
    #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; }
}

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();