带有 CSS 过渡的颤抖文本

Question

我试过在鼠标悬停在按钮上时创建涟漪效果，唯一的问题是当我将鼠标悬停在文本 shakes/rattles/shivers 上时，我希望它保持静止以便平滑过渡.关于如何阻止这种情况的任何想法？

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>

N.B。在 IE11 中没问题，在所有其他浏览器中都会发生。

Answer 1

给你...修改 HTML[在 div 中添加按钮文本并应用新的 class "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;
}

Demo

Answer 2

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

感谢 Nofi 的帮助。

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

带有 CSS 过渡的颤抖文本

Shivering text with CSS transitions

css

css-transitions

css-transforms