Почему эта анимация не работает в IE11?

Question

Я нашел анимацию ниже для заставки, которую я хотел бы использовать для цифровых вывесок.Проблема в том, что он не будет работать с IE11, единственным браузером, поддерживаемым в целевой системе.

Что нужно изменить, чтобы он работал?Я не могу найти на caniuse.com, какая функция не работает в IE.

Codepen: https://codepen.io/scottkellum/pen/BoZvjR

IE11 Отладочная ссылка: https://s.codepen.io/scottkellum/debug/BoZvjR

Код сSCSS удален:

body {
  margin: 0;
}

img, div {
  width: 100px;
  height: 100px;
}

.x {
  animation: x 13s linear infinite alternate;
}

.y {
  animation: y 7s linear infinite alternate;
}

@keyframes x {
  100% {
    transform: translateX( calc(100vw - 100px) );
  }
}

@keyframes y {
  100% {
    transform: translateY( calc(100vh - 100px) );
  }
}

<div class="x">
  <img class="y" src="https://blog.codepen.io/wp-content/uploads/2012/06/Button-Black-Large.png" alt="codepen" />
</div>

Если невозможно использовать этот точный способ, есть ли другой способ отразить изображение вокруг экрана?

РЕДАКТИРОВАТЬ:Я не могу найти решение в предложенном ответе CSS3-анимация не работает в IE11, но работает в других браузерах : в анимации нет оператора running, я попытался добавить переполнение: visible и контейнерыне меняйте размер

Answer 1

Я выяснил это, я снова просмотрел каждую функцию CSS3 на icanuse.com, и оказалось, что calc () не работает внутри преобразования в IE10, IE11 и Edge <14. </p>

Я могу жить с обходным путем установки размеров экрана вручную (это для цифровых вывесок, и экран всегда будет отображаться в Full HD)