通過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/

Answer 2

用這個

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