谁能帮我去掉谷歌浏览器中出现的悬停效果动画结束时断断续续的“啪”声?或者,解释为什么会出现“突然”?
我正在寻找一种实用的解决方案,让杂志封面看起来有点像从架子上拿下来的效果,所以我想要的是“翻出来”。如果将鼠标悬停在封面上,您会看到在最后有一点非常刺耳的断断续续的咔哒声。我正试图摆脱它,并了解这里发生了什么。任何帮助表示赞赏!
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>
最佳答案
也许您应该考虑告诉浏览器确切您想要设置动画的内容,这样它就不必为所有 属性设置动画。简单来说:
transition-property: transform;
而不是初始的 transition-property: all;
,因为 all 意味着 all - 即使没有任何动画它也会计算他们。如果您可以避免计算,您将获得更平滑的过渡。
关于css - 如何使用 transform : scale and origin? 改善悬停动画效果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58750533/