我想让这张卡片在悬停时缩放(包括其中的元素),但文本在转换过程中会摇晃/抖动(当您将卡片悬停时)并且在缩放期间和之后变得模糊(有时,有一些比率比其他人多,我认为这是由于亚像素值四舍五入所致)。
如何消除转换过程中的摇摆和模糊?
我不关心 IE 浏览器,我只希望它能在最新的 Chrome 中运行。
看来是
transition
属性引起的。
Codepen #1: https://codepen.io/x84733/pen/yEpYxX
.scalable {
transition: 0.3s ease-in-out;
box-shadow: 0 6px 10px rgba(0,0,0,0.14);
}
.scalable:hover {
transform: scale(1.05);
box-shadow: 0 8px 40px rgba(0,0,0,0.25);
}
.card {
width: 100%;
background: white;
padding: 20px;
}
body {
width: 50%;
height: 100%;
background: #999;
padding: 20px;
}
<div class="card scalable">
<div>here's some description</div>
</div>
更新:
我刚刚发现,当您以编程方式为其制作动画时,它不会摇晃/抖动:
我能以某种方式将它用于 JS 吗?
代码笔: https://codepen.io/anon/pen/LqXwOb?editors=1100
.anim {
animation: scale 0.3s ease-in-out infinite alternate;
}
@keyframes scale {
to { transform: scale(1.05) }
}
.scalable {
transition: 0.3s ease-in-out;
box-shadow: 0 6px 10px rgba(0,0,0,0.14);
}
.scalable:hover {
transform: scale(1.05);
box-shadow: 0 8px 40px rgba(0,0,0,0.25);
}
.card {
width: 100%;
background: white;
padding: 20px;
}
body {
width: 50%;
height: 100%;
background: #999;
padding: 20px;
}
<div class="el anim card scalable">
<div>here's some description</div>
</div>
最佳答案
您可以考虑使用具有透视图的 translateZ
而不是使用比例尺。确保最初定义透视以避免快速移动光标时的不良影响:
.scalable{
transition: 0.3s ease-in-out;
box-shadow: 0 6px 10px rgba(0,0,0,0.14);
transform:perspective(100px);
}
.scalable:hover {
transform:perspective(100px) translateZ(5px);
box-shadow: 0 8px 40px rgba(0,0,0,0.25);
}
.card {
width: 100%;
background: white;
padding: 20px;
}
body {
width: 50%;
height: 100%;
background: #999;
padding: 20px;
}
<div class="card scalable">
<div>here's some description</div>
</div>
减少模糊效果的一个想法是从负平移开始,然后回到 0:
.scalable{
transition: 0.3s ease-in-out;
box-shadow: 0 6px 10px rgba(0,0,0,0.14);
transform:perspective(100px) translateZ(-5px);
}
.scalable:hover {
transform:perspective(100px) translateZ(0px);
box-shadow: 0 8px 40px rgba(0,0,0,0.25);
}
.card {
width: 100%;
background: white;
padding: 25px;
}
body {
width: 50%;
height: 100%;
background: #999;
padding: 20px;
}
<div class="card scalable">
<div>here's some description</div>
</div>
关于css - 为什么文本在 2d 缩放变换期间变得模糊和摇摆,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50913783/