Css 如何通过使用缩放和变换原点来改进此动画，同时在像素中定义字体大小，同时强制换行？

我偶然发现一个问题。我在视频上加了一个覆盖图，在这个覆盖图中，我通过比例、颜色和填充来制作标题动画。动画在标题中造成了断行，这对我来说完全没有问题，因为我希望动画完全居中，并实际打断文字，使其完全可见。这就是我使用“变换原点”的原因。然而，在我看来，在任何浏览器中，动画都会变得更加古怪。我担心这是一个糟糕的代码，但我无法找出我做错了什么

你可能想知道为什么到目前为止我一直坚持用百分比表示字体大小。这就是为什么我需要将标题打断，以便在覆盖图中可读。到目前为止，当我以像素为单位定义字体大小时，缩放比例会将标题向左和向右剪切。不过，显然，当使用像素作为字体大小时，动画看起来更流畅。我发现这是自相矛盾的，因为人们通常会认为最终会出现一个以像素为单位定义字体大小的更加古怪的动画。你能想出更好的方法吗

**编辑：我刚刚加了一把小提琴！ **

我感谢任何建设性的意见！新年快乐

video {width: 100%;
  -webkit-filter: contrast(50%) brightness(110%) saturate(75%) sepia(82%);
  filter: contrast(50%) brightness(110%) saturate(75%) sepia(82%);
     }


.overlay-desc {
  z-index:8;
  opacity:1;
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.overlay-desc h4 {
  font-family: "Playfair Display", serif;
  font-weight: lighter;
  font-size:175%;
  border-top: 1px solid #595959;
  border-bottom: 1px solid #595959;
  padding-top:20px;
  padding-bottom:20px;
  color:#fff;
  -webkit-filter: contrast(50%) brightness(110%) saturate(75%) sepia(82%);
  filter: contrast(50%) brightness(110%) saturate(75%) sepia(82%);
  transform-origin: center center;  /* seems to make animation quirky, why? runs smoother when left out but does not accordingly center the animation in the video overlay */
   -webkit-transition: all 1.2s ease-in-out;
  -moz-transition:  all 1.2s ease-in-out;
  -ms-transition: all 1.2s ease-in-out;
  -o-transition: all 1.2s ease-in-out;
  transition: all 1.2s ease-in-out;
}

.overlay-desc:hover h4 {
  font-size:375%;
  color:#000;
  padding-bottom:43px;
  padding-top:43px;
  -webkit-filter: contrast(50%) brightness(110%) saturate(75%) sepia(82%);
  filter: contrast(50%) brightness(110%) saturate(75%) sepia(82%);
  -webkit-transform: scale(0.8);
  -moz-transform: scale(0.8);
  -ms-transform: scale(0.8);
  -o-transform: scale(0.8);
  transform: scale(0.8);
  -webkit-transition: all 1.2s ease-in-out;
  -moz-transition:  all 1.2s ease-in-out;
  -ms-transition: all 1.2s ease-in-out;
  -o-transition: all 1.2s ease-in-out;
  transition: all 1.2s ease-in-out;
}

世界报

编辑：你可能会注意到我只是一个业余程序员。我在描述这个问题时遇到了严重的问题，但是：如果你看一下上面给出的链接：我想让它完全按照它的原样和行为发生。我只是觉得代码本身会产生冲突，可以用更少的代码来完成，这也可能会影响动画的流畅性

<div class="col-md-12 animate-box">
                            <a class="video-grid">
                                <video playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop">
    <source src="images/video/korkernte3.mp4" type="video/mp4">
    <source src="images/video/korkernte3.webm" type="video/webm" />
    <source src="images/video/korkernte3.ogv" type="video/ogg" />
  </video><div class="overlay-desc">
        <h4>Der älteste nachwachsende Rohstoff der Welt</h4>
     </div> 

                            </a>
                        </div>