具有变换属性的 CSS 动画不应用最终状态答案

【问题标题】：CSS Animations with transform attribute not applying final state具有变换属性的 CSS 动画不应用最终状态
【发布时间】：2018-04-19 06:34:27
【问题描述】：

我正在尝试为元素的 transform 属性设置动画，但我注意到它在 IE 上无法正常工作（令人惊讶）。

当动画从

0% { transform: translateX(-50%) translateY(150px); }

到

100% { transform: translateX(-50%); }

好像忽略了translateX(-50%);

这是我在 html 元素上使用动画的方式（我使用正向，因此动画的最终状态是仍然应用于元素的状态）：

animation: myanimation 1s ease-out forwards;

我一直在尝试解决这个问题，甚至尝试从translate(-50%, 150px) 到translate(-50%, 0px)，但仍然无法解决。

这是一个有效的fiddle，可以快速查看差异。它在 Chrome 上运行良好，但在 IE 上表现不佳。

【问题讨论】：

标签： html css internet-explorer css-animations

【解决方案1】：

使用 transform: translate(X, Y) 它适用于 IE（使用供应商前缀作为 IE9 -ms-transform）

@keyframes myanimation {
    0% { transform: translate(50%, 150px); } /* i suppose -50% is a typo, if it's not replace it with -50% */
  100% { transform: translate(-50%, 0); }
}
#anim {
    display: inline-block;
    animation: myanimation 1s ease-out forwards;
}

&lt;h1 id="anim"&gt;Hello World&lt;/h1&gt;

【讨论】：

不，这不是错字，他想在 X 上有 -50% 并且只更改 Y --> 检查他的小提琴
但是可以通过转换：translate(-50%, 150px) 到 translate(-50%, 150px) 它可以工作，只是奇怪的是 IE 在使用 translateX 时忽略它

【解决方案2】：

您想将 X 从 -50% 设置为 -50% 的动画吗？如果要为 Y 坐标设置动画，则将值设置为目标百分比。

100% { transform: translateX(-50%) translateY(0); }

为什么不呢？这适用于 IE。我已经测试过了。

【讨论】：

谢谢，但我确实想从 -50% 转换为 -50%，我实际上是在追寻问题的根源