IE和Edge中未触发CSS动画

Question

我的CSS动画未正确触发：不透明度已激活，但未激活。

外观： https ： //jsfiddle.net/bLxb8k3s/

显然，这是因为IE和Edge无法在translateY和translate之间进行动画处理。

我进行了测试，将translate(0, 0)替换为translateY(0) ： https : //jsfiddle.net/gy129xyw/1/

而且有效。

但是我想保持关键帧的原样（使用translate(0,0) ），因为我在其他页面使用了很多不同的动画。

您认为我错过了什么吗，还是确实是IE和Edge的错误？

谢谢！

Answer 1

我认为在translation（％，％）中使用百分比存在问题。 我试图将其更改为固定像素，并且可以工作。 也不要忘记前缀

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