变换比例下的摆动文字 [英] Wobbly text on transform scale

问题描述

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

When I try to scale a div on mouse hover, the text wobbles/jitters and the animation is not smooth. This is especially apparent in FireFox, but can also be seen in Chrome.

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

Are there any changes I can do to make the animation smooth?

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

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>

推荐答案

因此，您在这里有很多事情要做，但是不幸的是，当您应对度量/安排的某些细微差别时，浏览器之间将需要各种不同的东西.传递，抗锯齿，硬件加速，透视等...

So you've got multiple things going on here, and unfortunately it's going to require various things between browsers as you tackle some of the nuances of the measure / arrange passes, anti-aliasing, hardware acceleration, perspective, etc...

.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>

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

So if we look through the changes, we see some things added...

背面可见性:隐藏； =用户不在乎背面，将其从合成器考虑中移除...

backface-visibility: hidden; = The user doesn't care about the back, remove it from the compositor consideration...

-webkit-font-smoothing:subpixel-antialiased; =我确定字体很酷，但是您可以重新尝试动态绘制所有特定于像素的阴影废话.

-webkit-font-smoothing: subpixel-antialiased; = I'm sure the font is cool, but you re-try redrawing all the pixel specific shading crap on the fly smoothly....

translate3d(0，0，0) ='ol hack在某些情况下强制硬件加速并让gpu提供帮助.

translate3d( 0, 0, 0) = 'ol hack to force hardware acceleration in some instances and let the gpu help out.

margin:0 =可以从考虑中删除用户代理边距垃圾...

margin: 0 = on your h2 to remove the user agent margin garbage from consideration...

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

perspective(1px) = Because you're transforming, remind it where home is...

希望在这两者之间，您应该看到预期的结果，希望对您有所帮助，欢呼！

Between these hopefully you should see the result you're expecting, hope it helps, cheers!

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

Oh, and just a quick PS: You don't need that many elements to accomplish the same thing (unless there's more to your example than what we see), I would try to shake that habit. One element and some text could deliver the same result with a cleaner DOM and less for the compositor thread to care about while doing its thing.

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

ADDENDUM; Eventually with scale you're going to run into a resolution loss as it's resizing an elements dimensions and its children on a 2d plane with a rasterization. Avoiding blurry effect the larger something is scaled is inevitable (as far as I know today) unless you want refactor into say a canvas with zoom, or easier yet treat the instance for what it is and instead just target the font in this scenario since it's the only thing actually needing to stay legible. So see the added example, which is targeting font-size as a vector instead. Cheers!

这篇关于变换比例下的摆动文字的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！