Question

我正在尝试为元素的转换属性设置动画，但我注意到它在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上行为不端。

Answer 1

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

＆＃13;

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

＆＃13;

<h1 id="anim">Hello World</h1>

＆＃13;

Answer 2

您想要将-X％的动画设置为-50％？如果要为Y坐标设置动画，请在目标百分比上设置值。

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

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

变换属性未应用最终状态的CSS动画

2 个答案: