如何使用变换改善这种悬停动画效果：比例和原点？答案

【问题标题】：How to improve this hover animation effect with transform: scale and origin?如何使用变换改善这种悬停动画效果：比例和原点？
【发布时间】：2020-03-04 03:22:06
【问题描述】：

有人可以帮我摆脱 Google Chrome 中出现的悬停效果动画结尾处的断断续续的“snap”吗？或者，解释一下为什么会出现“snap”？

我正在寻找实用的解决方案，以使杂志封面看起来像是从架子上抬起了一点点，所以我想要的想法是向上“出”。如果您将鼠标悬停在封面上，您会看到在结尾处有一个非常刺耳的断断续续的弹响。我正试图摆脱它，并且也了解这里发生了什么。任何帮助表示赞赏！

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>

【问题讨论】：

我在 Safari 上，没有看到您描述的“快照”。不过，也许将您的属性限制为 transform，无论如何，这可能会在浏览器上缓解它。
你是对的@somethinghere，Safari 中不会出现波动。我会用这些信息更新问题。
此外，将属性更改为仅转换似乎可以解决大部分问题。万分感谢！如果您想将其添加为答案，我可以接受。@somethinghere
我的 Chrome 上也没有显示快照。但我确实建议将初始比例设置为 .95，将 :hover 比例设置为 1.0，这将在大多数浏览器上提供更好的用户体验。
也很聪明@MiK 谢谢！

标签： css css-transitions css-transforms

【解决方案1】：

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

transition-property: transform;

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

【讨论】：