CSS3 animation not working in IE11 and Microsoft Edge

Question

This animation is working perfectly fine in chrome, firefox and opera. But it is not working in IE11 and Microsoft Edge. Can someone point out why it is not working and how can I make it work?

https://jsfiddle.net/0suvxsL3/1/

Code is already using vendor prefixes

Answer 1

Finally, I solved the problem. The problem is with calc(). It does not work inside keyframes in IE and Edge. This can be solved by chaining multiple translateX() to construct the expression inside calc().

For example:

left: calc(100vw - 20px) is same as

left: translateX(100vw) translateX(-20px)

Updated jsfiddle