转换css期间图像像素化

Question

＆＃13;

＆＃13;

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

＆＃13;

  .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;
  }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我注意到，如果有一个图像在转换下，它会在整个过程中像素化，直到动画完成。

如何避免这种情况？

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