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