图像模糊，是janky

2016-07-30 81 views 0 likes

您好我正在学习创建一些悬停效果，并成功地拉断了我脑子里想的这个动画：http://jsbin.com/xawibo/图像模糊，是janky

该动画形象的CSS是这样的：

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

但动画不平滑。过渡期间缩略图变得模糊，只有在过渡停止时才会变得清脆。还有一个轻微的左/右摇晃运动。

这里是什么，我看到一个快速的Youtube视频：

我在做什么是影响该动画的perforamce？我是否嵌套太多DIV？

2016-07-30 codemon

我不认为有图像模糊周围的方式 - 过渡时期那么图象就会模糊，这是动画图像的本质。我会说这是开发者注意到的比用户更多的东西 - 对我来说这个动画第一次看起来很棒，我曾两次看到这个问题。 – Toby

您正在浏览Chrome吗？我忘了提及我注意到这在铬，并不能测试其他浏览器ATM。 – codemon

是的，在Mac上的铬 – Toby

回答

似乎Chrome特定的问题。

相反的transform:scale()你可以动画width：

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

2016-07-30 01:05:03

谢谢！我尝试了它，它表现更好！然而，右侧仍然有轻微的推动 – codemon

这种情况发生在Windows上的Chrome显然。

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

2016-07-30 00:58:10 codeSwim

谢谢我试图从其他SO问题的修复，但没有发生任何事。我只是尝试使用-webkit-没有骰子。我在Windows 10上。我添加了原始帖子中看到的视频。 – codemon

我看了视频，它与我在Chrome上得到的非常相似，都在Windows7和Windows10上。 – codeSwim