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中的元素不会响应＆＃39;类＆＃39;属性。正确的属性是className。所以代码看起来像这样：

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

Answer 2

如果你想在属性改变时应用css，你应该使用转换，link你可以看到它在演示中将horizTranslate类类添加到框中

Answer 3

升起是完全正确的！一旦我做出这个改变不仅它起作用，而且如果我赶紧下一个动画它顺利地进行它（我相信）

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

非常感谢网络上的精彩人士!!其他一些程序员给我的解决方案至少可以说是吓人......

CSS动画无法启动

3 个答案: