CODEWITHSUNDEEP
cssinternet-explorerinternet-explorer-11css-animations
J O'Driscoll
J O'Driscoll

Reputation: 315

translate animations behaving oddly on IE11?

I've been investigating and odd behavior when viewing CSS animations on IE11. I've dug up multiple instances where IE11 struggles to digest CSS animations similar to Chrome/Firefox, but, I'd like to produce a solution to this "bug" once and for all.

Demonstration of behavior: http://recordit.co/6urL1s8XgR

As you can see, when the user interacts with the "button", the intended animation is to slide in from the bottom right, scale up and set the opacity to 1. A generic representation of the approach below:

.element {
   ...
   opacity: 1;
   animation: animate 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

@keyframes animate {
    from {
        opacity: 0;
        transform: scale3d(0.5, 0.5, 0.5) translate3d(0, 0, 500px);
    }
}

However, on IE11, it complete's the animation lower within the DOM than other browsers, causing the animated element to "jump up" from where it (incorrectly) ended (the animation), to where it needed to finish.

A similar demonstration can be observed at the following url: https://chemonics.com/region/

Upvotes: 1

Views: 110

Answers (1)

J O'Driscoll
J O'Driscoll

Reputation: 315

I've resolved this issue with isolating the problem being the animation-fill-mode property of "forwards" was not present. This was causing the animation to (which only had a 0% keyframe defined for the animation) to end (at 100%) by inheriting the styles of the elements initial state (prior to the animation). With more modern browsers, they "fill in the gaps" whereas with IE11, well, it jumps between the gaps.

https://drafts.csswg.org/css-animations-1/#valdef-animation-fill-mode-forwards

Upvotes: 1

Related Questions