Question

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

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

＆＃13;

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

＆＃13;

<div class="balloon-outer"><div class="balloon"><div class="balloon-inner"></div></div></div>

＆＃13;

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启用硬件加速，这将有助于动画。您可以查看this post了解更多信息。

Answer 2

您可以使用供应商前缀“-ms-transform”回退到IE-11。

例如：

as.factor(unique(c(as.character(list1), as.character(list2))))

请在此处查看答案。

CSS3 transform:scale in IE

ie11翻译缩放模糊图像

2 个答案: