画像は、遷移CSS中にpixelates

Question

$('.click').click(function(){ 
 
    $('.image').toggleClass("image1"); 
 
    });

.click{ 
 
    position:absolute; 
 
    top:1%; 
 
    left:45%; 
 
    cursor:pointer; 
 
    } 
 
    .image{ 
 
    cursor: pointer; 
 
    position: absolute; 
 
    top:25%; 
 
    left:0%; 
 
    height:60%; 
 
    -webkit-transition: all 3s ease; 
 
    -moz-transition: all 3s ease; 
 
    -o-transition: all 3s ease; 
 
    -ms-transition: all 3s ease; 
 
    transition: all 3s ease; 
 
    } 
 
    .image1{ 
 
    cursor: pointer; 
 
    position: absolute; 
 
    top:25%; 
 
    left:50%; 
 
    height:50%; 
 
    -webkit-transition: all 3s ease; 
 
    -moz-transition: all 3s ease; 
 
    -o-transition: all 3s ease; 
 
    -ms-transition: all 3s ease; 
 
    transition: all 3s ease; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> 
 

 
    <div class="click">Click here to animate</div> 
 
    <img class="image" src="https://upload.wikimedia.org/wikipedia/commons/c/c4/Winter_baby_10-months-old.jpg">

私は、移行の下で行くイメージがあるかどうアニメーションが完了するまで、それは処理中にピクセル化ということに気付きました。

これを回避するにはどうすればよいですか？

Answer 1

画像にはimage-rendering: pixelated;を使用できます。あなたはそれで大丈夫ですか？ありがとう。

$('.click').click(function(){ 
 
    $('.image').toggleClass("image1"); 
 
    });

.click{ 
 
    position:absolute; 
 
    top:1%; 
 
    left:45%; 
 
    cursor:pointer; 
 
    } 
 
    .image{ 
 
    cursor: pointer; 
 
    position: absolute; 
 
    top:25%; 
 
    left:0%; 
 
    height:60%; 
 
    -webkit-transition: all 3s ease; 
 
    -moz-transition: all 3s ease; 
 
    -o-transition: all 3s ease; 
 
    -ms-transition: all 3s ease; 
 
    transition: all 3s ease; 
 
    image-rendering: pixelated; 
 
    } 
 
    .image1{ 
 
    cursor: pointer; 
 
    position: absolute; 
 
    top:25%; 
 
    left:50%; 
 
    height:50%; 
 
    -webkit-transition: all 3s ease; 
 
    -moz-transition: all 3s ease; 
 
    -o-transition: all 3s ease; 
 
    -ms-transition: all 3s ease; 
 
    transition: all 3s ease; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> 
 

 
    <div class="click">Click here to animate</div> 
 
    <img class="image" src="https://upload.wikimedia.org/wikipedia/commons/c/c4/Winter_baby_10-months-old.jpg">