html - 具有转换属性的 CSS 动画不应用最终状态

Question

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

动画时

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

到

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

似乎忽略了translateX(-50%);

这是我在 html 元素上使用动画的方式(我使用 forwards 所以动画的最终状态是仍然应用于该元素的状态):

animation: myanimation 1s ease-out forwards;

我一直在尝试解决这个问题，甚至尝试从 translate(-50%, 150px) 到 translate(-50%, 0px) 但是还是不行。

这是一个有效的 fiddle快速看到差异。它在 Chrome 上运行良好，但在 IE 上运行不正常。

Answer 1

使用 transform: transform(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;
}

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