javascript - CSS 动画无法启动

Question

所以，我正在做这个汽车展示画廊，我想使用 CSS 动画。

现在只使用 Firefox，当我手动设置“img”的类以向左动画时，动画确实有效:HTML:

<img src="test3.jpg" id="Position2" class="Pos2ForLeft">

CSS:

@keyframes Pos2Pos1 {
0% {left: 450; top: 200; width: 400; height:300;}
100%  {left: 200; top: 250; width: 200; height:150;}
}     

.Pos2ForLeft {
position:absolute; left: 450; top: 200; width: 400; height:300;
animation-name: Pos2Pos1;animation-play-state:running;
animation-duration:1s; animation-fill-mode: forwards;
}

所以当我手动编码时，动画运行然后停止，就像我想要的那样。但是当我从一个标准的 CSS 类开始并想切换到带有动画的那个时，没有任何反应:

document.getElementById("Position"+i).class = "Pos"+positionsBefore[i]+"ForLeft";
alert(document.getElementById("Position"+i).class)

请忽略循环和变量。我收到警告说类已更改为我想要的类，但没有任何反应。有什么我需要触发的吗？发生了什么？

Answer 1

JavaScript 中的元素不会响应“类”属性。正确的属性是类名。所以代码看起来像这样:

document.getElementById("Position"+i).className = "Pos"+positionsBefore[i]+"ForLeft";