如何用 transform: scale and origin 改善这个 hover 动画效果？

Question

有人可以帮我去掉 Google Chrome 中出现的悬停效果动画结束时的断断续续的 "snap" 吗？或者，解释为什么会出现 "snap"？

我正在寻找一种实用的解决方案，使杂志封面看起来有点像从架子上拿下来的效果，所以 "out" 是我想要的想法。如果将鼠标悬停在封面上，您会看到在最后有一点非常刺耳的断断续续的咔哒声。我正试图摆脱它，并了解这里发生了什么。任何帮助表示赞赏！

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 - 即使没有任何动画它也会计算他们。如果您可以避免计算，您将获得更平滑的过渡。

如何用 transform: scale and origin 改善这个 hover 动画效果？

How to improve this hover animation effect with transform: scale and origin?

css

css-transitions

css-transforms