Question

当我尝试在鼠标悬停时缩放div时，文本会摆动/抖动，并且动画不流畅。这在FireFox中尤其明显，但在Chrome中也可以看到。

我可以做些什么来使动画流畅吗？

.mtw { 
  max-width: 200px;
  margin: 0 auto; 
}
.mt .mp {
  text-align: center;
}
.mt .mp .ma {
  color: #fff;
  font: 800 40px OpenSansBold, Arial, Helvetica, sans-serif;
  min-height: 60px;
}
.mt .header-blue {
  background: blue;
}
.mt {
  transition: all 0.4s linear;
}
.mt:hover{
  z-index: 1;	
  transform: scale(1.1);
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -o-transform: scale(1.1);
  -ms-transform: scale(1.1);	
}

<div class="mtw">
  <div class="mt">
    <div class="header-blue">
      <h2 class="mp">
        <span class="ma">49</span>
      </h2>
    </div>
  </div>
</div>

Answer 1

因此，您在这里有很多事情要做，但是不幸的是，当您处理一些度量/排列传递，抗锯齿，硬件加速，透视图等细微差别时，浏览器之间将需要进行各种操作。

.mtw {
  max-width: 200px;
  margin:0 auto; 
}
.mt .mp { text-align: center }
.mt .mp .ma {
  color: #fff;
  font: 800 40px OpenSansBold, Arial, Helvetica, sans-serif;
  min-height: 60px;
}
.mp { margin: 0 }
.mt .header-blue {
  background: blue;
}
.mt {
  transition: all 0.4s linear;
  backface-visibility: hidden;
  -webkit-font-smoothing: subpixel-antialiased;
}
.mt:hover {
  z-index: 1;
  -webkit-transform: scale(1.1) translate3d( 0, 0, 0) perspective(1px);
     -moz-transform: scale(1.1) translate3d( 0, 0, 0) perspective(1px);
       -o-transform: scale(1.1) translate3d( 0, 0, 0) perspective(1px);
      -ms-transform: scale(1.1) translate3d( 0, 0, 0) perspective(1px);
          transform: scale(1.1) translate3d( 0, 0, 0) perspective(1px);
}

/* --- cleaner way --- */
#boom {
  color: #fff;
  background-color: blue;
  font: 800 40px OpenSansBold, Arial, Helvetica, sans-serif;
  min-height: 60px;
  max-width:200px;
  margin:0 auto;
  text-align: center;
  transition: transform 0.4s linear;
  backface-visibility: hidden;
  -webkit-font-smoothing: subpixel-antialiased;
  will-change: transform;  
}
#boom:hover {	
  -webkit-transform: scale(1.1) translate3d( 0, 0, 0) perspective(1px);
     -moz-transform: scale(1.1) translate3d( 0, 0, 0) perspective(1px);
       -o-transform: scale(1.1) translate3d( 0, 0, 0) perspective(1px);
      -ms-transform: scale(1.1) translate3d( 0, 0, 0) perspective(1px);
          transform: scale(1.1) translate3d( 0, 0, 0) perspective(1px);
}

/* --- Another way --- */
#weee {
  color: #fff;
  background-color: blue;
  font: 800 40px OpenSansBold, Arial, Helvetica, sans-serif;
  min-height: 60px;
  max-width:200px;
  margin:0 auto;
  text-align: center;
  transition: font-size 0.4s linear;
  backface-visibility: hidden;
  -webkit-font-smoothing: subpixel-antialiased;
  will-change: font-size;
}
#weee:hover {
  font-size: 120px;
}

<div class="mtw">
  <div class="mt">
    <div class="header-blue">
      <h2 class="mp">
        <span class="ma">49</span>
      </h2>
    </div>
  </div>
</div>

<br/><br/>

Or, cleaner way....
<div id="boom">50</div>

<br/><br/>

Or, an entirely different way...
<div id="weee">51</div>

因此，如果我们仔细查看更改，就会发现添加了一些内容...

backface-visibility: hidden; =用户不在乎背面，将其从合成器考虑中删除...

-webkit-font-smoothing: subpixel-antialiased; =我确定字体很酷，但是您可以尝试重新绘制所有特定于像素的明暗处理，以便快速运行。...

translate3d( 0, 0, 0) ='在某些情况下，黑客会强迫硬件加速并让gpu提供帮助。

margin: 0 =在您的h2上将用户代理边距垃圾从考虑中移除...

perspective(1px) =因为您正在变换，所以请记住它在哪里...

在这些之间，希望您能看到预期的结果，希望对您有所帮助，欢呼！

哦，只是快速的PS：您不需要那么多元素来完成同一件事（除非您的示例比我们看到的要多），所以我会尝试养成这种习惯。一个元素和一些文本可以使用更简洁的DOM传递相同的结果，而更少的信息供合成器线程在执行其操作时关心。

附录；最终，使用scale会遇到分辨率损失，因为它在具有栅格化的2d平面上调整元素尺寸及其子元素的大小。避免模糊效果是不可避免的（按我今天的了解），除非要缩放为带有缩放的画布，或者要更轻松地将实例视作实际情况，而在这种情况下仅将字体作为目标，否则就无法缩放。唯一需要保持清晰的东西。因此，请参见添加的示例，该示例将字体大小作为矢量。干杯！

Answer 2

我认为正在发生一些事情。但这应该可以解决：

.mt {
  transition: transform 0.4s linear;
  transform: scale(.9);
}

.mt:hover{
    z-index: 1; 
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);    
}

很难缩放文本。我相信您会看到它跳跃的原因是文本在动画过程中正在重新计算行高和字母间距。
我看到的更重要的问题是，将小数位设置为大于1。小数位应从小开始，最大为1。当您真正清晰地将图片缩放到1以上时，您会看到缩放垃圾。

变换比例下的摆动文字

2 个答案: