CSS3 左动画仅适用于 Chrome

Question

我有这个动画（假设我使用了适当的供应商前缀）：

@keyframes animIn {
    10% {
        left: 10%;
        opacity: 0;
    }
    50% { opacity: 1; }
    90% {
        left: 90%;
        opacity: 0;
    }
}

这在 Chrome 中运行良好，但在 IE 和 Firefox 中，left 属性没有动画。在 IE 中，它们的动画元素位于左侧（看起来像 left: 0），而在 Firefox 中，动画元素居中（可能是由于 text-align: center）。动画元素有position: absolute，它会像所有主流浏览器一样淡入淡出。

我做错了什么？

Answer 1

使用margin-left 而不是left 参见小提琴http://jsfiddle.net/Lmh3nt6p/4/

@keyframes animIn {  

    10% {
        margin-left: 10%;
        opacity: 0;
    }
    50% { opacity: 1; }
    90% {
        margin-left: 90%;
        opacity: 0;
    }
}