Html CSS动画没有完全工作？

圣诞节快到了，我想这是给圣诞节倒计时编码的最佳时机。我能够很好地理解JavaScript和HTML，但开始在CSS方面遇到一些问题。以下是我的全部代码：

//获取HTML元素
var head=document.getElementById（'head'）；
var subhead=document.getElementById（‘subhead’）；
var counter=document.getElementById（'counter'）；
//圣诞节
var christmas=新日期（'2016年12月25日00:00:00'）；
//更新计时器
函数更新程序（圣诞节）{
var time=圣诞节-新日期（）；
//提供更新时要查找的内容
返回{
“天”：数学楼层（时间/（1000*60*60*24）），
“小时”：数学楼层（（时间/（1000*60*60））%24），
“分钟”：数学楼层（（时间/1000/60）%60），
“秒”：数学地板（（时间/1000）%60），
“总计”：时间
};
};
//启动计时器
功能启动器（计数器，圣诞节）{
var timerInterval=setInterval（函数（）{
var定时器=更新定时器（圣诞节）；
//更改“计数器”的文本
counter.innerHTML=''+timer.days+''
+''+计时器.小时数+''的
+''+计时器。分钟数+''
+''+定时器秒数+''；
//如果圣诞节
如果（计时器总数<1）{
clearInterval（timerInterval）；
counter.innerHTML='0000'；
head.innerHTML=“今天是圣诞节！！！”；
subhead.innerHTML=“祝大家圣诞快乐！！！”；
}
//如果是平安夜
否则如果（计时器天数<1）{
subhead.innerHTML=“现在是平安夜！离圣诞节还有多久？”；
}
}，1000）；//计时器每秒更新一次
};
window.onload=函数（）{
startTimer（柜台，圣诞节）；
};  
*：焦点{
大纲：无；
}
身体{
背景色：#991f00；
文本阴影：2PX2PX8PX000000；
}
标题{
颜色：白色；
文本对齐：居中；
字体系列：“Cinzel装饰”，无衬线；
}
#时钟跨度{
浮动：左；
文本对齐：居中；
利润率：0.2.5%；
填充：20px；
宽度：20%；
框大小：边框框；
颜色：白色；
字体系列：“圣诞山”，无衬线；
字体大小：40px；
}
#反跨度{
背景色：#000000；
边界半径：100%；
动画名称：色彩变化；
动画持续时间：6s；
动画填充模式：两者都有；
动画迭代次数：无限；
}
@关键帧颜色更改{
0%, 100% {
背景色：#42f471；
}
50% {
背景色：#ea524f；
}
}

圣诞倒计时
圣诞节倒计时！
离圣诞节还有多久？看看钟，看看有没有发现！
天
小时
会议记录
秒
您的基本缺陷是每秒都在重新创建DOM元素，而动画设置为6s

而不是像您在这里所做的那样重新创建DOM：

counter.innerHTML = '<span>' + timer.days + '</span>'
                   + '<span>' + timer.hours + '</span>'
                    + '<span>' + timer.minutes + '</span>'
                    + '<span>' + timer.seconds + '</span>';

counter.innerHTML=''+timer.days+''
+''+计时器.小时数+''的
+''+计时器。分钟数+''
+''+定时器秒数+''；

您需要单独更改每个
span
的内部文本，这样span本身就不会重新创建。
请注意，每当计时器更新时，动画都会重新启动-这是因为这些DOM元素是由JavaScript重新创建的，因此动画会重新开始。通过像这样为跨度指定每个ID来确定目标，您将看到动画：


//获取HTML元素
var head=document.getElementById（'head'）；
var subhead=document.getElementById（‘subhead’）；
var counterDays=document.getElementById（'days'）；
var counterHours=document.getElementById（'hours'）；
var counterMinutes=document.getElementById（'minutes'）；
var counterSeconds=document.getElementById（'seconds'）；
//圣诞节
var christmas=新日期（'2016年12月25日00:00:00'）；
//更新计时器
函数更新程序（圣诞节）{
var time=圣诞节-新日期（）；
//提供更新时要查找的内容
返回{
“天”：数学楼层（时间/（1000*60*60*24）），
“小时”：数学楼层（（时间/（1000*60*60））%24），
“分钟”：数学楼层（（时间/1000/60）%60），
“秒”：数学地板（（时间/1000）%60），
“总计”：时间
};
};
//启动计时器
功能启动计时器（计数器日、计数器小时、计数器分钟、计数器秒、圣诞节）{
var timerInterval=setInterval（函数（）{
var定时器=更新定时器（圣诞节）；
//更改“计数器”的文本
counterDays.innerHTML=timer.days；
counterHours.innerHTML=timer.hours；
counterMinutes.innerHTML=timer.minutes；
counterSeconds.innerHTML=timer.seconds；
//如果圣诞节
如果（计时器总数<1）{
clearInterval（timerInterval）；
counterDays.innerHTML=0；
counterHours.innerHTML=0；
counterMinutes.innerHTML=0；
counterSeconds.innerHTML=0；
head.innerHTML=“今天是圣诞节！！！”；
subhead.innerHTML=“祝大家圣诞快乐！！！”；
}
//如果是平安夜
否则如果（计时器天数<1）{
subhead.innerHTML=“现在是平安夜！离圣诞节还有多久？”；
}
}，1000）；//计时器每秒更新一次
};
window.onload=函数（）{
startTimer（反