MS Edge中的CSS動畫和IE動畫方向錯誤

Question

我創建了一個簡單的CSS動畫，可以垂直轉換僞元素。此動畫在Chrome，FireFox和Safari中非常適用，但在Microsoft Edge或Internet Explorer中並非如此。

我正在努力弄清楚這個錯誤的原因。任何幫助將是偉大的！

如何動畫應該看看：

它的外觀在邊緣和IE：

動畫例如：https://jsfiddle.net/9x5vckhb/

@keyframes scroll { 
    0% { 
     transform: translate(-50%, 20%); 
     opacity: 0; 
    }, 
    30% { 
     opacity: 1; 
    }, 
    40% { 
     opacity: 1; 
    }, 
    70% { 
     transform: translate(-50%, 120%); 
     opacity: 0; 
    }, 
    100% { 
     transform: translate(-50%, 120%); 
     opacity: 0; 
    } 
} 

Answer 1

我想知道這是不是一個錯誤。我的生活無法籠絡我的頭腦。在第一個動畫循環之後，似乎正在交換x &。切換到transform3d()，它的工作完美。

Fiddle

&:before { 
    content: '•'; 
    font-size: round($width/100*63.3); 
    top: 0; 
    transform: translate3d(-50%, 30%, 0); 
    animation: scroll ease 3s; 
    animation-iteration-count: infinite; 
    } 

而且

@keyframes scroll { 
    0% { 
    transform: translate3d(-50%, 20%, 0); 
    opacity: 0; 
    }, 
    30% { 
    opacity: 1; 
    }, 
    40% { 
    opacity: 1; 
    }, 
    70% { 
    transform: translate3d(-50%, 120%, 0); 
    opacity: 0; 
    }, 
    100% { 
    transform: translate3d(-50%, 120%, 0); 
    opacity: 0; 
    } 
}