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 animation is not working in IE11 but works in other browsers的建议答案中找不到解决方案：动画中没有正在运行的语句，我尝试添加了overflow：visible，并且容器未更改大小。

Answer 1

我发现了这一点，我再次在icanuse.com上查找了每个CSS3函数，结果证明calc（）在IE10，IE11和Edge <14的转换中不起作用。

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

为什么此动画在IE11中不起作用？

1 个答案: