$('.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">我注意到，如果有一个图像处于过渡状态，它会在动画完成之前的过程中像素化。
如何避免这种情况？
最佳答案
您可以使用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">关于过渡CSS期间图像像素化，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37915254/