所以,我正在做这个汽车展示画廊,我想使用 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)
请忽略循环和变量。我收到警告说类已更改为我想要的类,但没有任何反应。有什么我需要触发的吗?发生了什么?
最佳答案
JavaScript 中的元素不会响应“类”属性。正确的属性是类名。所以代码看起来像这样:
document.getElementById("Position"+i).className = "Pos"+positionsBefore[i]+"ForLeft";
关于javascript - CSS 动画无法启动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30056917/