变换尺度上的抖动文本

Question

当我试图在鼠标悬停上缩放一个div时，文本会抖动/抖动，动画也不会平滑。这一点在FireFox中尤为明显，但在Chrome中也可以看到。

有什么变化，我可以做，使动画顺利吗？

JS Fiddle：https://jsfiddle.net/jL4dbxf9/

​

.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

我想有几件事正在发生。但这应该能解决这个问题：

.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. 很难对文本进行缩放。我相信你看到它跳转的原因是，在你的动画中，文本正在重新计算线条高度和字母间距。
2. 我所看到的更重要的问题是，你将比例设置为1以上。规模应该从小开始，以1结束为最大。当你把一张图片刻在1上面的时候，你就可以看到刻度jank了。

Answer 2

当动画的模式，文本是跳跃的，这解决了我的问题：

.modal > * {
  transform: scale(1.000001);
}

它似乎没有太多地修改维度，并得出如下结论:)