Поддержка флип-анимации в IE

Question

Я пытаюсь реализовать флип анимациюВот пример ссылки: http://animista.net/play/basic/flip

и это класс:

.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);
  }
}

Он отлично работает в Chrome и Firefox, но не работает вообще в IE11.Какие изменения мне потребуются, чтобы он работал в IE 11?

Answer 1

Из их "Как" примечаний:

Кроме того, некоторые анимации являются экспериментальными и могут работать не так, как ожидалось в старых браузерах, независимо от того, как вы их префиксили.Используйте свое собственное суждение или еще лучше - обратитесь к супер-полезному caniuse.com, чтобы проверить поддержку браузера.

Кроме того, насколько я могу судить, они не предоставляют полный код.У них есть perspective:500px на их обертке стадии анимации (в демоверсии), которая заставляет все это работать, и я не вижу нигде упомянутого в коде примера загрузки.

Даже после того, как вы добавите его, ясомневаюсь, что он будет работать в IE, так как ему не хватает поддержки transform-style:preserve-3d, как указано в здесь ответов .