Javascript 为什么关闭动画时过渡不起作用？

当您单击“关闭”按钮时，我想做一件事：

• 灯光必须平稳地熄灭

我将CSS类的“light”属性设置为：

transition1sall

。但什么也没发生。
灯光衰减非常快，没有平滑效果。我想用JS关闭开关

constlights=document.queryselectoral（“.light”）；
const buttonOn=document.querySelector（“.on”）；
const buttonOff=document.querySelector（“.off”）；
按钮off.addEventListener（'单击'，（）=>{
对于（让灯光中的灯光）{
light.style.animation='none'；
light.style.background=“#563260”；
}
})

*{
框大小：边框框；
保证金：0；
填充：0；
}
身体{
字体系列：Poppins，无衬线；
背景色：黑色；
}
.包装纸{
显示器：flex；
弯曲方向：立柱；
宽度：100%；
最小高度：100vh；
}
.集装箱{
宽度：1460px；
显示器：flex；
证明内容：周围的空间；
保证金：20px自动；
文本对齐：居中；
}
.头衔{
文本对齐：居中；
颜色：白色；
字体大小：7rem；
字母间距：2px；
文本阴影：0px 0px 25px wht；
}
.小组{
保证金：自动；
}
.按钮{
右边距：10px；
文字装饰：无；
字体大小：20px；
高度：50px；
线高：45px；
显示：内联块；
颜色：白烟；
填充：0px 10px；
边界半径：50%；
边框：3倍纯紫色；
}
.光{
边缘顶部：5px；
边界半径：50%；
宽度：40px；
高度：40px；
位置：相对位置；
动画持续时间：1s；
动画迭代次数：无限；
动画方向：交替；
过渡：所有1s线性；
}
.光：：以前{
内容：“；
位置：绝对位置；
顶部：-5px；
左：50%；
z指数：2；
转换：转换（-50%，0）；
边框右下半径：4px；
边框左下半径：4px；
宽度：10px；
高度：6px；
背景颜色：灰色；
}
.光：：之后{
内容：“；
位置：绝对位置；
顶部：-10px；
左：-70px；
高度：10px；
宽度：87px；
边界半径：50%；
边框底部：3倍纯色棕色；
}
.light:第一个孩子：：之后{
宽度：0；
}
紫色{
动画名称：紫色；
}
格林先生{
动画名称：绿色；
动画延迟：1s；
}
.粉红{
动画名称：粉红；
}
黄先生{
动画名称：黄色；
动画延迟：1s；
}
@关键帧为紫色{
0% {
盒影：无；
背景色：rgb（29,2,49）；
}
100% {
背景色：rgb（91,9150）；
盒影：0px 0px 15px 3px靛蓝；
}
}
@关键帧为绿色{
0% {
盒影：无；
背景色：rgb（3,58,10）；
}
100% {
背景色：rgb（49206,10）；
盒影：0px 0px 15px 3px rgb（3622810）；
}
}
@关键帧粉红色{
0% {
盒影：无；
背景色：rgb（71,4,51）；
}
100% {
背景色：rgb（214,13,154）；
盒影：0px 0px 15px 3px rgb（202,17,147）；
}
}
@关键帧为黄色{
0% {
盒影：无；
背景色：rgb（56,56,2）；
}
100% {
背景色：rgb（212、212、7）；
盒影：0px 0px 15px 3px rgb（240、240、13）；
}
}

名称
圣诞灯

您混淆了动画和过渡。关闭动画对转换的属性没有影响。过渡是以前设置的样式被更改为其他值时发生的。@ScottMarcus好的，但如何使动画平稳停止？感谢帮助，找到了问题。您混淆了动画和过渡。关闭动画对转换的属性没有影响。转换是以前设置的样式被更改为其他值时发生的。@ScottMarcus好的，但是如何使动画平稳停止？感谢帮助，找到了问题。