Css 如何使用“变换：比例和原点”改善悬停动画效果？

有人能帮我摆脱谷歌Chrome中出现的悬停效果动画结尾的起伏“快照”吗？或者，解释为什么会发生“快照”

我正在寻找一种切实可行的解决方案，这种效果会让人觉得杂志的封面有点脱离了书架，所以我的想法是“走出去”。如果你将鼠标悬停在封面上方，你会看到在封面的最末端有一个非常刺耳的小片。我正试图摆脱这一切，同时也明白这里发生了什么。感谢您的帮助

li.newsletter{
文本对齐：居中；
宽度：100%；
}
.拇指{
线高：1px；
保证金：0自动；
}      
拇指：之后{
内容：“；
显示：块；
高度：16px；
宽度：100%；
背景：#CBCB；
盒影：10px 5px 8px 0 rgba（0,0,0,0.2）；
宽度：100%；
z指数：+10；
不透明度：0.99；//z索引堆栈顺序hack
}
img{
过渡时间：0.2s；
过渡性质：变换；
过渡时间功能：轻松；
盒影：4px0px12px0rgba（0,0,0,0.2）；
}
a:悬停img{
转换：标度（1.05）；
变换原点：50%100%；
}

代码> 也许你应该考虑告诉浏览器你想要动画的内容，这样就不必为所有的属性设置动画了。简单来说：

transition-property: transform;

而不是初始的
转换属性：all，因为这一切都意味着一切-即使没有任何动画，它也会计算它们。如果你能避免计算，你会得到更平滑的过渡。
我在Safari上，没有看到你描述的“快照”。也许把你的属性限制在变换上，不管怎样，这可能会让你在浏览器上轻松一些。你是对的，在Safari中没有这种变化。我将用这些信息更新这个问题。另外，将属性更改为仅转换似乎可以解决大部分问题。非常感谢！如果你想加上这个作为回答，我可以接受。@something这里我也看不到我的Chrome上有任何快照。但我建议将初始比例设置为.95，将：hover scale设置为1.0，这将在大多数浏览器上提供更好的用户体验，而且非常聪明@MiK谢谢！