L'animation CSS3 ne fonctionne pas dans IE11 et Microsoft Edge

Question

Cette animation fonctionne parfaitement bien en chrome, firefox et opéra. Mais cela ne fonctionne pas dans IE11 et Microsoft Edge. Quelqu'un peut-il expliquer pourquoi cela ne fonctionne pas et comment puis-je le faire fonctionner?

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

code

utilise déjà vendor prefixes

Answer 1

Enfin, je résolu le problème. Le problème est avec calc(). Cela ne fonctionne pas dans les images clés dans IE et Edge. Cela peut être résolu en enchaînant plusieurs translateX() pour construire l'expression à l'intérieur de calc().

Par exemple:

left: calc(100vw - 20px) est la même que

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

Updated jsfiddle