Why is this animation not working in IE11? - html

Question

I found the animation below for a screensaver I'd like to use for digital signage. Problem is, it wont work with IE11, the only browser supported on the target system.
What needs to be changed to make it work? I can't find on caniuse.com what feature isn't working in IE.
Codepen: https://codepen.io/scottkellum/pen/BoZvjR
IE11 Debug Link: https://s.codepen.io/scottkellum/debug/BoZvjR
Code with SCSS removed:
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>
If it isn't possible to use that exact way, is there another way to bounce an image around the screen?
EDIT: I can't finde the solution in the proposed answer of CSS3 animation is not working in IE11 but works in other browsers: There is no running statement in the animation, I tried adding the overflow:visible and the containers don't change size.

Answer 1

I found it out, I looked up every CSS3 function on icanuse.com again, and it turns out, calc() doesn't work inside transform in IE10, IE11, and Edge < 14.
I can live with the workaround of setting the screen dimensions manually (it's for digital signage and the screen will always be shown on full HD)