javascript - 通过 JS 调用时，CSS3 动画在 Chrome 中不起作用

Question

我有一个带有以下 CSS 的页脚:-

#transFooter {
opacity: 0;
margin-left: -2000px;
}

@-webkit-keyframes transFooter {
    100% { margin-left: 0; opacity: 1; }
}

@keyframes transFooter {
    100% { margin-left: 0; opacity: 1; }
}

它使用以下代码进行动画处理:-

document.getElementById("transFooter").style.animation = "transFooter 2s forwards";

但是，它似乎不适用于 Chrome。有什么想法吗？

Answer 1

在 JavaScript 中，添加:

document.getElementById("transFooter").style["-webkit-animation"] = "transFooter 2s forwards";

http://jsfiddle.net/GMb3C/