CSS3使动画仅在Chrome中工作

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

这在Chrome中运行良好，但在IE和Firefox中，left属性不具有动画效果。在IE中，动画元素保持在左侧（看起来像

left:0

），而在Firefox中，动画元素居中（可能是由于

text align:center

）。动画元素有

position:absolute

，它会像所有主流浏览器一样淡入淡出

---

我做错了什么？

用

左边距

代替

左边距

参见小提琴

---

尝试添加一个

0%{}

和一个

100%{}

如果没有这两个，IE就不能工作。这是你的问题，对吗？

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

@keyframes animIn {  

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