在CSS过渡期间图像模糊并且很笨拙

Question

您好我正在学习创建一些悬停效果并设法通过此动画实现我的想法：http://jsbin.com/xawibo/

动画图像的CSS是：

transform: scale(3, 3) translateY(50%);

但动画并不流畅。缩放过程中缩略图变得模糊，仅在过渡停止时再次变得清晰。还有一个轻微的左/右生涩运动。

以下是我看到的快速Youtube视频：

https://www.youtube.com/watch?v=yoIgV1ORbN8&feature=youtu.be

我在做什么影响了这个动画的性能？我是否在筑巢太多DIV？

Answer 1

这显然发生在Windows上的chrome上。

似乎与此处描述的问题非常相似： CSS transition effect makes image blurry / moves image 1px, in Chrome?

将-webkit-transform: [...]与transform: [...]一起使用时会发生什么？

Answer 2

似乎是Chrome特定的问题。

而不是transform:scale()，您可以为width制作动画：

.caption:hover > span img{
  background: rgba(0, 158, 205, 0.45);
  transform: translate(0,10%) ;
  width:100%;
}