Bild pixelates während des Übergangs 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">

Ich habe bemerkt, dass, wenn es ein Bild ist, das unter einem Übergang geht es während des Prozesses pixelate würde, bis die Animation abgeschlossen ist.

Wie kann dies vermieden werden?

Answer 1

Sie können image-rendering: pixelated; zum Bild verwenden. Ich hoffe, es geht dir gut. Vielen Dank.

$('.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">