如何通过变换来改善悬停动画效果:比例和原点

Question

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

我正在寻找实用的解决方案，使杂志封面看起来像是从货架上取下了一点，所以我要追求的是向上和"向外"。如果你把鼠标悬停在封面上，你会看到在封面的最后有一个小的波涛汹涌的瞬间，非常刺耳。我正在努力摆脱这种情况，同时也了解这里发生了什么。感谢您的帮助！

li.newsletter {
text-align: center;
width: 100%;  
}
.thumb {
	    line-height: 1px;
	    margin: 0 auto;
}      
.thumb:after{
	    content: "";
	    display: block;
	    height: 16px;
	    width: 100%;
	    background: #cbcbcb;
	box-shadow: 10px 5px 8px 0 rgba(0,0,0,0.2);
	    width: 100%;
	    z-index: +10;
	    opacity: 0.99; // z-index stack order hack
}
img {
	transition-duration: 0.2s;
	    transition-property: transform;
	    transition-timing-function: ease;
	    box-shadow: 4px 0px 12px 0 rgba(0, 0, 0, 0.2);
}
a:hover img {
	transform: scale(1.05);
	transform-origin: 50% 100%;
}

<ul class="newsletters">
<li class="newsletter">
<a href="#">
<div class="thumb">
<img width="100" height="200" src="https://dummyimage.com/100x200/000000/fff.jpg&text=Magazine+Cover" />           </div>
<div class="title">
<div class="newsletter-title">Issue No. 15</div>
<div class="newsletter-date">September 2019</div>
</div>
</a>
</li>
</ul>

Answer 1

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

transition-property: transform;

而不是初始的transition-property: all;，因为all意味着all-即使没有任何动画，它也会计算它们。如果可以避免计算，则可以获得更平滑的过渡。