带有 CSS 过渡的颤抖文本

Question

我尝试过用按钮悬停在上面时创建涟漪效果，我唯一的问题是当我将鼠标悬停在文本上时文本会摇晃/嘎嘎作响/颤抖，我希望它保持静止以平滑过渡。关于如何阻止这种情况的任何想法？

a {
  display: block;
  position: relative;
  width: 300px;
  height: 50px;
  background: rgba(0, 0, 255, .2);
  text-decoration: none;
  text-align: center;
  overflow: hidden;
  margin: 10% auto;
}
p,
span:first-of-type,
span:last-of-type {
  position: absolute;
  margin: 0;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  border-radius: 50%;
  transition: all .3s;
}
span:first-of-type {
  transition-delay: .1s;
  z-index: 1;
}
span:last-of-type {
  transition-delay: .2s;
  z-index: 2;
}
span.cta {
  color: #33C;
  text-transform: uppercase;
  font-family: Arial;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  display: block;
  transition: color .3s;
  z-index: 3;
}
a:hover p,
a:hover span:first-of-type,
a:hover span:last-of-type {
  width: 110%;
  height: 660%;
  border-radius: 50%;
  background: rgba(0, 0, 255, .2);
}
a:hover span:first-of-type,
a:hover span:last-of-type {
  width: 100%;
  height: 100%;
}
a:hover p span {
  color: #FFF;
}

<a href="#">
  <p>
    <span></span>
    <span class="cta">Shop the Trend</span>
    <span></span>
  </p>
</a>

注

：注：在IE11中很好，在其他浏览器中都会发生。

Answer 1

你去...修改了 HTML[在div 中添加了按钮文本并对其应用了新类"textCta"]

<span class="cta"><div class="textCta">Shop the Trend</div></span>

.CSS

.textCta {
    color:#33C;
    text-transform:uppercase;
    font-family:Arial;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 300px;
    display: block;
    transition: color .3s;
    z-index: 3;
}

演示

Answer 2

通过删除 p 标签并将实际文本放在div 中，我设法停止了颤抖，并且仍然保持背景效果不变。

感谢诺菲的帮助。

<a href="#">
    <span></span>
    <div class="cta">Shop the Trend</div>
    <span></span>
</a>