Image pixelates во время перехода CSS

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">