Question

当发生以下转换时，图像会像素化一两秒钟。你知道它为什么会发生以及如何解决它吗？

＆＃13;

#picture {
  height: 96px;
  width: 96px;
  -webkit-transition: all 0.05s ease-out;
  -moz-transition: all 0.05s ease-out;
  -o-transition: all 0.05s ease-out;
  transition: all 0.05s ease-out;
  background-color: black;
}
#picture:hover {
  height: 106px;
  width: 106px;
  -webkit-transition: all 0.05s ease-in;
  -moz-transition: all 0.05s ease-in;
  -o-transition: all 0.05s ease-in;
  transition: all 0.05s ease-in;
}

＆＃13;

<img src="http://stefandigital.com/yp/images/icons/man01.png" id="picture" />

＆＃13;

Codepen

Answer 1

使用transform和scale()功能，而不是更改width和height属性。

在性能方面，使用transform会产生更好的FPS，因为它可以避免浏览器重排。

#picture {
  height: 96px;
  width: 96px;
  -webkit-transition: transform 0.05s ease-out;
  -moz-transition: transform 0.05s ease-out;
  -o-transition: transform 0.05s ease-out;
  transition: transform 0.05s ease-out;
  background-color: black;
  transform-origin: 0 0;
}
#picture:hover {
  transform: scale(1.141);
}

<img src="http://stefandigital.com/yp/images/icons/man01.png" id="picture" />

Revised Codepen

备注：

避免在all属性中使用关键字transition，仅定位要转换的属性有助于提高性能。

除非hover状态中的transition-timing-fuction发生更改，否则transition属性中不需要定义:hover属性。

transform-origin用于更改元素转换的来源。

Answer 2

原始图片＆＃39;尺寸太大了。它是2000x2000像素，我把它降到了128x128。现在像素消失了！但是谢谢你们进行优化

css过渡期间的像素化图像

Codepen

2 个答案:

Revised Codepen