如何修复悬停时文本阴影的抖动 CSS 动画？答案

【问题标题】：How can I fix shaky CSS animation of text shadow on hover?如何修复悬停时文本阴影的抖动 CSS 动画？
【发布时间】：2020-04-02 00:37:47
【问题描述】：

我尝试放大字体大小，同时缩小阴影。

会发生这样的事情：

它在开始和结束时都在颤抖。在我的浏览器中效果非常强，但是包含的代码 sn-p 的行为似乎并不完全相同。如何解决这种抖动并获得看起来自然的动画？

.heading-primary {
  text-align: center;
  font-size: 4.5rem;
  backface-visibility: hidden;
}

.heading-primary__letter {
  font-size: 5rem;
  font-weight: 600;
  width: 9%;
  display: inline-block;
  transition: all 1s;
  position: relative;
  backface-visibility: hidden;
}

.heading-primary__letter--shadow {
  color: transparent;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1);
  text-shadow: 0.5rem 0.5rem 1rem rgba(0, 0, 0, 0.4);
  transition: all 1s;
  backface-visibility: hidden;
}

.heading-primary__letter:hover {
  transform: scale(1.3);
}

.heading-primary__letter:hover > .heading-primary__letter--shadow {
  transform: translate(-50%, -50%) scale(0.8);
  text-shadow: 0.5rem 0.5rem 0.5rem rgba(0, 0, 0, 0.65);
}

}

<h1 class="heading-primary">
    <span class="heading-primary__letter">H<span class="heading-primary__letter--shadow">H</span></span>
</h1>

【问题讨论】：

尝试使用 css will-change，也尝试使用纯阴影，而不是第二个 H。其中一个选项可能会使您的 H 行为更流畅。
我可以缩小阴影，同时放大字母吗？因为这是我想要达到的效果。我不能仅仅通过缩放字母来做到这一点。
我试过-webkit-font-smoothing: antialiased、transform: scale(1) translateZ(0)，都没有成功

标签： html css animation hover shadow

【解决方案1】：

您的部分问题是字体粗细问题比我在this question 上解释得更好，另一个是运行 2 个不同动画并试图使其正常工作的方法。将一些可能有帮助的代码放在一起 jsFiddle。

https://jsfiddle.net/SyWill/fwxLq7rt/6/

    /*Html Portion*/
    /* -Added link pointing to a font that has the weights to make a decent transition */
    /* -Removed Your secondary inner span in favor of just transitioning the text shadow*/

    <link href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900" rel="stylesheet" />
        <h1 class="heading-primary">
            <span class="heading-primary__letter">H</span>
        </h1>

/*CSS Portion*/
/* -Added font-family to reference the new font we brought in */
/* -Added arbitrary start value for the text-shadow so you could see it grow */
/* -Added transition timing to try and smooth out the effect, still could use tweaking*/
/* -Removed all code relevant to the secondary H */

.heading-primary {
  text-align: center;
  font-size: 4.5rem;
  backface-visibility: hidden;
  font-family:"Lato";
}

.heading-primary__letter {
  font-size: 5rem;
  font-weight: 600;
  width: 9%;
  display: inline-block;
  transition: all 1.4s cubic-bezier(0.175, 0.885, 0.32, 0.999);
  position: relative;
  backface-visibility: hidden;
  text-shadow: 0.2rem 0.2rem 0.2rem rgba(0, 0, 0, 0.15);
}
.heading-primary__letter:hover {
  transform: scale(1.3);
  text-shadow: 0.5rem 0.5rem 0.5rem rgba(0, 0, 0, 0.65);
}

希望对你有帮助！

【讨论】：