如何解决悬停时文本阴影的摇晃CSS动画？

Question

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

发生的事情：

开始和结束时都在颤抖。在我的浏览器中，效果非常明显，但是所包含的代码片段的行为似乎并不完全相同。如何解决这种震动并获得自然的动画效果？

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

Answer 1

我建议采用这种解决方案，但如果我理解正确的话，你能纠正我吗:)

div {
  display:inline-block;
  font-size:40px;
  text-shadow:2px 6px 6px rgba(0,0,0,0.8);
  transition:all 0.3s ease;
}
div:hover {
  text-shadow:2px 1px 2px rgba(0,0,0,0.75);
  transform:scale(1.6);
}

<div>H</div>

Answer 2

由于主要元素的增长，阴影似乎不必缩小。这个解决方案怎么样？

div {
  display:inline-block;
  position:relative;
  font-size:40px;
}
.main {
  z-index:1;
  transition:all 0.6s ease;
  color:blue;
}
.shadow {
  z-index:0;
  filter: blur(4px);
  transform:translate(-100%, 0);
  color:red;
  pointer-events:none;
  transition:all 0.6s ease;
}
.main:hover {
  transform:scale(1.6);
}

.main:hover + .shadow {
  filter: blur(2px);
}

<div class="main">H</div>
<div class="shadow">H</div>