ie11转换比例尺模糊图像

Question

我正在尝试制作气球飞行的动画。在所有现代浏览器中，IE11都是如此。

我正在使用translateX和translateY没问题，但是缩放导致图像变得模糊。

@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

我尝试过这个技巧，在很多地方都见过，但没什么区别。

-webkit-backface-visibility: hidden; 
-ms-transform: translateZ(0); /* IE 9 */
-webkit-transform: translateZ(0); /* Chrome, Safari, Opera */
transform: translateZ(0);

Answer 1

尝试改变你的一切translateX并translateY喜欢translate3d：

@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);}
}

在您的示例中使用的所有地方都执行相同的操作translates。translate3d 启用硬件加速，这将有助于动画。您可以查看这篇文章以获取更多信息。