为什么这个动画在 IE11 中不起作用？答案

【问题标题】：Why is this animation not working in IE11?为什么这个动画在 IE11 中不起作用？
【发布时间】：2019-03-09 10:56:09
【问题描述】：

我在下面找到了我想用于数字标牌的屏幕保护程序的动画。问题是，它不适用于目标系统上唯一支持的浏览器 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 animation is not working in IE11 but works in other browsers 的建议答案中找不到解决方案：动画中没有运行语句，我尝试添加溢出：可见并且容器不改变大小。

【问题讨论】：

stackoverflow.com/questions/34809544/… 这应该可以帮助您度过难关。
CSS3 animation is not working in IE11 but works in other browsers的可能重复
跳过在 IE 中的工作。不到 4% 的浏览器要么是 IE 要么是 Edge（Edge 比 IE 好）。 w3schools.com/browsers
如果可以的话，我会的。就像我写的那样，它是用于数字标牌的，它只使用 IE 作为其浏览器引擎

标签： html css

【解决方案1】：

我发现了，我又在 icanuse.com 上查找了每个 CSS3 函数，结果发现 calc() 在 IE10、IE11 和 Edge

我可以接受手动设置屏幕尺寸的解决方法（它用于数字标牌，屏幕将始终以全高清显示）

【讨论】：