CSS3 左动画仅在 Chrome 中有效

CSS3 left animation only working in Chrome

我有这个动画(假设我使用了适当的供应商前缀):

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

在 Chrome 中工作正常,但在 IE 和 Firefox 中,左侧 属性 没有动画。在 IE 中,它们的动画元素保持在左侧(看起来像 left: 0),而在 Firefox 中,动画元素居中(可能是由于 text-align: center)。动画元素有 position: absolute,它会像在所有主流浏览器中一样淡入淡出。

我做错了什么?

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

@keyframes animIn {  

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