IE11 translate scale blurry image - css

Question

I am trying to create an animation of a balloon flying. All is weel in all modern browsers except IE11.
I am using translateX and translateY without any problem but scale is causing the image to become blurry.
#media (min-width: 1100px) {
.balloon-outer,
.balloon-inner,
.balloon {
height: 100%;
position: absolute;
width: 100%;
bottom: 0;
right: 0;
animation-duration: 60s;
animation-delay: 0;
animation-iteration-count: infinite;
animation-direction: normal;
will-change: transform;
pointer-events: none;
}
.balloon-outer {overflow-y: hidden;
transform-origin: 50% 50%;
animation-name: travel-x;
animation-timing-function: ease-in;
transform: translateX(-20%);
}
.balloon {
transform-origin: 50% 50%;
animation-name: travel-y;
animation-timing-function: ease-out;
transform: translateY(90%);
}
.balloon-inner {background:url("https://www.inty.com/wp-content/uploads/balloon.png") no-repeat scroll 100% 100% / auto 40%;
transform-origin: 100% 100%;
animation-name: scale;
animation-timing-function: linear;
transform: scale(3);
}
}
#keyframes scale {
0% {transform: scale(3);}
80% {transform: scale(0);}
100% {transform: scale(0);}
}
#keyframes travel-x {
0% {transform: translateX(-10%);}
80% {transform:translateX(-45%);}
100% {transform:translateX(-45%);}
}
#keyframes travel-y {
0% {transform: translateY(120%);}
80% {transform:translateY(-70%);}
100% {transform:translateY(-70%);}
}
<div class="balloon-outer"><div class="balloon"><div class="balloon-inner"></div></div></div>
http://codepen.io/rachelreveley/pen/xdLGEO
I have tried this trick which I have seen in several places but it made no difference.
-webkit-backface-visibility: hidden;
-ms-transform: translateZ(0); /* IE 9 */
-webkit-transform: translateZ(0); /* Chrome, Safari, Opera */
transform: translateZ(0);

Answer 1

Try changing all your translateX and translateY to translate3d like:
#keyframes travel-x {
0% {transform: translate3d(-10%,0,0);}
80% {transform:translate3d(-45%,0,0);}
100% {transform:translate3d(-45%,0,0);}
}
#keyframes travel-y {
0% {transform: translate3d(0,120%,0);}
80% {transform:translate3d(0,-70%,0);}
100% {transform:translate3d(0,-70%,0);}
}
do the same everywhere you have been using translates in your example. translate3d enables hardware acceleration which will help with animations.
you can see this post for more info.

Answer 2

You can use a fallback to IE-11 with the vendor prefix "-ms-transform".
for example:
.balloon-outer {overflow-y: hidden;
transform-origin: 50% 50%;
animation-name: travel-x;
animation-timing-function: ease-in;
transform: translateX(-20%);
-ms-transform: translateX(-20%);
}
See the answer here.
CSS3 transform:scale in IE