CSS3動畫留下只在Chrome的

Question

我有這個動畫時（假設我用適當的供應商前綴）：

@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，它在所有主流瀏覽器中都可以淡入淡出。

我在做什麼錯？

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; 
    } 
}