IE 和 Edge 中未触发 CSS 动画答案

【问题标题】：CSS Animation not triggered in IE and EdgeIE 和 Edge 中未触发 CSS 动画
【发布时间】：2025-12-30 07:05:15
【问题描述】：

我的 CSS 动画未正确触发：不透明度是动画但不是翻译。

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

显然，这是因为 IE 和 Edge 无法在 translateY 和 translate 之间设置动画。

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

而且它有效。

但我想保持我的关键帧原样（使用translate(0,0)），因为我在其他页面中经常使用它，并带有不同的动画。

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

谢谢！

【问题讨论】：

看起来这是一个错误。我没有 100% 的确认，但即使使用 -ms 或 -webkit 也不起作用。
那么为什么不将 transform: translateY(100%); 更改为 transform: translate(0, 100%); ...我的意思是无论哪种方式，您都不能使用 2 个不同的关键帧为同一个属性设置动画
这是一个在 IE/Edge 中运行良好的示例：jsfiddle.net/LGSon/bLxb8k3s/3

标签： css internet-explorer css-animations microsoft-edge

【解决方案1】：

我认为在 translate(%, %) 中使用百分比存在问题。我试图将其更改为固定 px 并且它可以工作。也不要忘记前缀

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

【讨论】：