在 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

我认为在 translate(%, %) 中使用百分比有问题。我试图将其更改为固定像素并且它有效。也不要忘记前缀

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