CSS过渡期间的像素化图像

Question

当下面的过渡发生时，图像会有一到两秒钟像素化。你知道为什么会发生这种情况以及如何解决它吗?

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

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

---

Codepen

Answer 1

不改变width和height的属性，使用 transform 和 scale() 函数。

性能方面，使用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" />

---

修订Codepen

---

指出:

• 避免在transition属性中使用关键字all，只针对将被转换的属性有助于提高性能。
• 除非 transition-timing-fuction 在悬停状态下发生变化，否则transition属性不需要在:hover伪类中定义。
• transform-origin 用于改变元素的转换原点。

Answer 2

原始图片的大小太大了。原来是2000 × 2000像素，我把它调到128 × 128。现在像素消失了!谢谢你们的优化