CSS-Animation nicht in IE und Edge ausgelöst

Question

Meine CSS-Animation wird nicht richtig ausgelöst: die Deckkraft ist animiert, aber nicht die Übersetzung.

Look: https://jsfiddle.net/bLxb8k3s/

Offenbar ist es, weil IE und Edge-kann nicht zwischen einem translateY und einem translate animieren.

Ich habe einen Test gemacht, wo ich meine ersetzt translate(0, 0) durch translateY(0): https://jsfiddle.net/gy129xyw/1/

Und es funktioniert.

Aber ich möchte meine Keyframes so behalten, wie sie sind (mit einer), weil ich es oft in anderen Seiten benutze, mit verschiedenen Animationen.

Glaubst du, ich habe etwas verpasst, oder ist es in der Tat ein Fehler von IE und Edge?

Danke!

Answer 1

Ich glaube, es gibt ein Problem bei der Verwendung von Prozent in Übersetzung (%,%). Ich habe versucht, es auf festen px zu ändern, und es funktioniert. auch nicht vergessen, über die Präfixe

https://jsfiddle.net/bLxb8k3s/1/

span { 
    display: block; 
    position: relative; 
    transform: translateY(200px); 
    -webkit-transform: translateY(200px); 
    -ms-transform: translateY(200px); 
    animation: slideIn .7s .7s both; 
}