search

web-animations / web-animations-js

JavaScript implementation of the Web Animations API
http://web-animations.github.io
Apache License 2.0
3.77k stars 408 forks source link

Elements with transform transition set - can't animate transform property #164

Open jonjhiggins opened 7 years ago

jonjhiggins commented 7 years ago

Hi!

Just starting out with the Web Animations API.

I've got an element that has transition: transform 350ms; set in it's CSS. When trying to animate using the following JS:

animateEl.animate({ transform: ["none", "translateX(100px)"] }, 1000);

Works fine in Chrome/Firefox, Safari the transition slows the animation and Internet Explorer 11 doesn't animate the element at all.

IE11 does animate fine when the transition is removed and also when the element is wrapped in another element and that is animated instead, see this Codepen: https://codepen.io/jonjhiggins/pen/QMvWXp

Should I not apply animations to elements with transitions or is this a bug?

Internet Explorer version is 11.0.9600 on VirtualBox from modern.ie

Thanks in advance