正确的方法来动画div调整文本的大小

Question

调整div大小的正确方法是什么?我使用了下面的代码，但是它在调整大小时给我留下了明显的字体失真。这有点像动画过程中字体改变了。圆圈内也有闪烁。这个效果在OSX上并不明显，但在windows机器上是可见的。我怎么修理它?

.content-no-btn {
  transition: all .2s ease-in-out;
}
.content-no-btn:hover {
  transform: scale(1.05);
}
.entry-content {
  border-style: solid;
  border-color: #bbb;
  border-width: 0px 3px 3px 3px;
  padding-top: 20px;
}
#price {
  text-align: center;
}
.plan {
  display: inline-block;
  margin: 10px 1%;
  font-family: 'Lato', Arial, sans-serif;
}
.plan-inner {
  background: #fff;
  margin: 0 auto;
  min-width: 280px;
  max-width: 100%;
  position: relative;
}
.entry-title {
  background: #53CFE9;
  height: 140px;
  position: relative;
  text-align: center;
  color: #fff;
  margin-bottom: 0px;
}
.entry-title>h3 {
  background: #20BADA;
  font-size: 20px;
  padding: 5px 0;
  text-transform: uppercase;
  font-weight: 700;
  margin: 0;
}
.entry-title .price {
  position: absolute;
  bottom: -25px;
  background: #20BADA;
  height: 95px;
  width: 95px;
  margin: 0 auto;
  left: 0;
  right: 0;
  overflow: hidden;
  border-radius: 50px;
  border: 4px solid #fff;
  line-height: 80px;
  font-size: 23px;
  font-weight: 700;
}
.price span {
  position: absolute;
  font-size: 8px;
  bottom: -10px;
  left: 30px;
  font-weight: 400;
}
.entry-content {
  color: #323232;
  padding-top: 20px;
}
.entry-content ul {
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
}
.entry-content li {
  border-bottom: 1px solid #E5E5E5;
  padding: 10px 0;
}
.entry-content li:last-child {
  border: none;
}
.btn {
  padding: 5em 0 5em 0;
  text-align: center;
}
.btn a {
  background: #323232;
  padding: 10px 30px;
  color: #fff;
  text-transform: uppercase;
  font-weight: 700;
  text-decoration: none
}
.hot {
  position: absolute;
  top: -7px;
  background: #F80;
  color: #fff;
  text-transform: uppercase;
  z-index: 2;
  padding: 2px 5px;
  font-size: 9px;
  border-radius: 2px;
  right: 10px;
  font-weight: 700;
}
.basic .entry-title {
  background: #f37920;
}
.basic .entry-title > h3 {
  background: #E7680C;
}
.basic .price {
  background: #f37920;
}
.standard .entry-title {
  background: #4484c1;
}
.standard .entry-title > h3 {
  background: #3772aa;
}
.standard .price {
  background: #3772aa;
}
.ultimite .entry-title > h3 {
  background: #DD4B5E;
}
.ultimite .entry-title {
  background: #F75C70;
}
.ultimite .price {
  background: #DD4B5E;
}
.gratitude {
  padding: 5em 20px 5em 20px;
  height: 300px;
  text-align: center;
  background-color: #f8f9f9;
}
.orderDetailsContent {
  max-width: 800px;
  text-align: center;
  display: table;
  position: relative;
  margin: auto;
}

<div id="price">
  <!--price tab-->
  <div class="plan">
    <div class="plan-inner">
      <div class="content-no-btn">
        <div class="entry-title first-entry-title">
          <h3>WHATUP </h3>
          <div class="price">$0.99<span></span>
          </div>
        </div>
        <div class="entry-content first-entry-content">
          <ul>
            <li><strong>SOME text here</strong></li>
            <li><strong>and here too</strong>  really</li>
            <li><strong>and here too</strong> Effective</li>
            <li><strong>HEHE</strong> and here too</li>
          </ul>
        </div>
      </div>
      <div class="btn">
        <a href="#">Order Now</a>
      </div>
    </div>
  </div>
  <!-- end of price tab-->
  <!--price tab-->
  <div class="plan basic">
    <div class="plan-inner">
      <div class="content-no-btn">
        <div class="entry-title">
          <h3>YEAH </h3>
          <div class="price">$1.99<span></span>
          </div>
        </div>
        <div class="entry-content">
          <ul>
            <li><strong>SOME text here</strong></li>
            <li><strong>and here too</strong>  really</li>
            <li><strong>and here too</strong> Effective</li>
            <li><strong>HEHE</strong> and here too</li>
          </ul>
        </div>
      </div>
      <div class="btn">
        <a href="#">Order Now</a>
      </div>
    </div>
  </div>
  <!-- end of price tab-->
  <!--price tab-->
  <div class="plan standard">
    <div class="plan-inner">
      <div class="content-no-btn">
        <div class="hot">hot</div>
        <div class="entry-title">
          <h3>Superduper</h3>
          <div class="price">$2.99<span></span>
          </div>
        </div>
        <div class="entry-content">
          <ul>
            <li><strong>SOME text here</strong></li>
            <li><strong>and here too</strong>  really</li>
            <li><strong>and here too</strong> Effective</li>
            <li><strong>HEHE</strong> and here too</li>
          </ul>
        </div>
      </div>
      <div class="btn">
        <a href="#">Order Now</a>
      </div>
    </div>
  </div>
  <!-- end of price tab-->
  <!--price tab-->
  <div class="plan ultimite">
    <div class="plan-inner">
      <div class="content-no-btn">
        <div class="entry-title">
          <h3>JustGreat</h3>
          <div class="price">$3.99<span></span>
          </div>
        </div>
        <div class="entry-content">
          <ul>
            <li><strong>SOME text here</strong></li>
            <li><strong>and here too</strong>  really</li>
            <li><strong>and here too</strong> Effective</li>
            <li><strong>HEHE</strong> and here too</li>
          </ul>
        </div>
      </div>
      <div class="btn">
        <a href="#">Order Now</a>
      </div>
    </div>
  </div>
  <!-- end of price tab-->
</div>
<div class="gratitude"></div>

Answer 1

如此小的比例转换是臭名昭著的。只有更好的浏览器才能解决这个问题。

相反，考虑具有整数像素的翻译动画，可能是向上的。你也可以通过在.content-no-btn上设置position:relative，然后添加一个100%宽度和高度的绝对定位的::before，并在悬停时仅缩放该伪元素来获得一些缩放效果。