為什么此動畫在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中不起作用，但在其他瀏覽器中有效 ：動畫中沒有正在運行的語句，我嘗試添加了overflow：visible並且容器沒有變化尺寸。

Answer 1

我發現了這一點，再次在icanuse.com上查詢了每個CSS3函數，結果發現calc（）在IE10，IE11和Edge <14中的transform內不起作用。

我可以接受手動設置屏幕尺寸的解決方法（用於數字標牌，並且屏幕始終以全高清顯示）