ie11スケールがぼやけている画像

Question

飛行船のアニメーションを作成しようとしています。 IE11を除くすべての最新のブラウザーでは、すべてがうごめいです。

私はtranslateXとtranslateYを問題なく使用していますが、スケールが原因で画像がぼやけています。

@media (min-width: 1100px) { 
 
\t .balloon-outer, 
 
\t .balloon-inner, 
 
\t .balloon { 
 
\t \t height: 100%; 
 
\t \t position: absolute; 
 
\t \t width: 100%; 
 
\t \t bottom: 0; 
 
\t \t right: 0; 
 
\t \t animation-duration: 60s; 
 
\t \t animation-delay: 0; 
 
\t \t animation-iteration-count: infinite; 
 
\t \t animation-direction: normal; 
 
\t \t will-change: transform; 
 
\t \t pointer-events: none; 
 
\t } 
 
\t .balloon-outer {overflow-y: hidden; 
 
\t \t transform-origin: 50% 50%; 
 
\t \t animation-name: travel-x; 
 
\t \t animation-timing-function: ease-in; 
 
\t \t transform: translateX(-20%); 
 
\t } 
 
\t .balloon { 
 
\t \t transform-origin: 50% 50%; 
 
\t \t animation-name: travel-y; 
 
\t \t animation-timing-function: ease-out; 
 
\t \t transform: translateY(90%); 
 
\t } 
 
\t .balloon-inner {background:url("https://www.inty.com/wp-content/uploads/balloon.png") no-repeat scroll 100% 100%/auto 40%; 
 
\t \t transform-origin: 100% 100%; 
 
\t \t animation-name: scale; 
 
\t \t animation-timing-function: linear; 
 
\t \t transform: scale(3); 
 
\t } 
 
} 
 

 
\t @keyframes scale { 
 
\t \t 0% {transform: scale(3);} 
 
\t \t 80% {transform: scale(0);} 
 
\t \t 100% {transform: scale(0);} 
 
\t } 
 
\t @keyframes travel-x { 
 
\t \t 0% {transform: translateX(-10%);} 
 
\t \t 80% {transform:translateX(-45%);} 
 
\t \t 100% {transform:translateX(-45%);} 
 
\t } 
 
\t @keyframes travel-y { 
 
\t \t 0% {transform: translateY(120%);} 
 
\t \t 80% {transform:translateY(-70%);} 
 
\t \t 100% {transform:translateY(-70%);} 
 
\t }

<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

ようtranslate3dにすべてのtranslateXとtranslateYを変更してみてください：あなたはあなたの例ではtranslatesを使用しているどこでも同じことを行う

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

。 translate3dは、アニメーションに役立つハードウェアアクセラレーションを可能にします。 詳細はthis postをご覧ください。

Answer 2

ベンダープレフィックス「-ms-transform」を使用してIE-11にフォールバックを使用できます。例えば

：

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

はここの回答を参照してください。

CSS3 transform:scale in IE