Question

我想让这张卡在悬停时缩放（包括其中的元素），但是在转换过程中（当你将卡片悬停时）文字会摇摆/抖动，并且在缩放期间和之后会变得模糊（有时，有些比例）比其他人更多，我认为这是由于子像素值四舍五入）。

如何在转型过程中消除这种晃动和模糊？

我不关心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>

UPDATE：

我刚刚发现，当你以编程方式为它设置动画时，它不会抖动/抖动：

我能以某种方式使用JS吗？

Codepen： 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>

Answer 1

您可以考虑使用透视图来代替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>

Answer 2

还将原点从100％添加到104％。这样可以防止跳跃和最终结果模糊

ngModelChange

干杯！

Answer 3

使用javascript吗？

const el = document.querySelector("#parent");
const text = document.querySelector("#text");

let i = 0;

el.addEventListener("mouseover",function(){
    this.style.transform = "scale(1.05)";
})
el.addEventListener("mouseout",function(){
    this.style.transform = "scale(1.00)";
  el.style.boxShadow = "0 8px 40px rgba(0,0,0,0.25);"
})

.scalable {
  transition: 0.3s ease-in-out;
  box-shadow: 0 6px 10px rgba(0,0,0,0.14);
}

.card {
  width: 100%;
  background: white;
  padding: 20px;
}

body {
  width: 50%; 
  height: 100%; 
  background: #999;
  padding: 20px;
}

<div id="parent" class="card scalable">
  <div id="text">here's some description</div>
</div>

为什么在2D变换期间文本会变得模糊和抖动

UPDATE：

3 个答案: