图像在 CSS 过渡期间模糊并且卡顿

Question

嗨，我正在学习创建一些悬停效果，并设法实现了我对这个动画的想法：http://jsbin.com/xawibo/

动画图像的CSS是这样的：

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

但是动画不流畅。缩略图在过渡期间变得模糊，只有在过渡停止时才会再次变得清晰。还有轻微的 left/right 抖动。

这是我看到的 Youtube 视频：

我在做什么会影响此动画的性能？我是否嵌套了太多 DIV？

Answer 1

这显然发生在 Windows 的 chrome。

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

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

Answer 2

似乎是 Chrome 特定问题。

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

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

image blurs during CSS transition and is janky