Flip animation support in IE

Question

I am trying to implement flip animation. Here is the sample link: http://animista.net/play/basic/flip

and this is the class:

.flip-horizontal-bottom {
    -webkit-animation: flip-horizontal-bottom 0.4s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
            animation: flip-horizontal-bottom 0.4s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
}


/**
 * ----------------------------------------
 * animation flip-horizontal-bottom
 * ----------------------------------------
 */
@-webkit-keyframes flip-horizontal-bottom {
  0% {
    -webkit-transform: rotateX(0);
            transform: rotateX(0);
  }
  100% {
    -webkit-transform: rotateX(-180deg);
            transform: rotateX(-180deg);
  }
}
@keyframes flip-horizontal-bottom {
  0% {
    -webkit-transform: rotateX(0);
            transform: rotateX(0);
  }
  100% {
    -webkit-transform: rotateX(-180deg);
            transform: rotateX(-180deg);
  }
}

It works fine in Chrome and Firefox but does not work at all in IE11. What changes would I require to make it work in IE 11?

score 1 · Accepted Answer · answered Nov 16 '18 at 08:30

From their "How to" notes:

Also, some of the animations are experimental and may not work as expected in older browsers no matter how you prefix them. Use your own judgement or better yet – consult the super-useful caniuse.com to check for browser support.

Besides, they don't provide the complete code as far as I can tell. They have a perspective:500px on their animation stage wrapper (in the demo) which makes it all work, and I don't see it mentioned anywhere in the download example code.

Even after you add it, I doubt it will work in IE, as it lacks support for transform-style:preserve-3d, as pointed out in the answers here.

Flip animation support in IE

1 Answers1