css - IE和Edge中未触发CSS动画

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

看：https://jsfiddle.net/bLxb8k3s/

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

我做了一个测试，用translate(0, 0)替换了translateY(0)：https://jsfiddle.net/gy129xyw/1/

而且有效。

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

您是否认为我错过了某些东西，或者确实是IE和Edge的错误？

谢谢！

最佳答案

我认为在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;
}

关于css - IE和Edge中未触发CSS动画，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44020880/