Safari中颤抖的css运行文本动画（边距+翻译）答案

【问题标题】：Trembling css running text animation(margin + translate) in SafariSafari中颤抖的css运行文本动画（边距+翻译）
【发布时间】：2021-05-21 10:14:50
【问题描述】：

我用 CSS 相同的方式制作了一些正在运行的文本动画动画，就像在回答 here 中一样。我试图这样实现它以避免任何 JS 操作。在 Chrome 中一切正常，但在 Safari 中文本会颤抖。

.marquee {
  position: relative;
  overflow: hidden;
  background: rgb(161, 61, 175);
  color: #fff;
}

.marquee span {
  display: inline-block;
  min-width: 100%; /* this is to prevent shorter text animate to right */
  white-space: nowrap;
  font-size: 2.5em;
  animation: marquee 4s ease-in-out infinite;
}

@keyframes marquee {
  0% {
    transform: translateX(0);
    margin-left: 0;
  }

  10% {
    transform: translateX(0);
    margin-left: 0;
  }

  90% {
    transform: translateX(-100%);
    margin-left: 100%;
  }

  100% {
    transform: translateX(-100%);
    margin-left: 100%;
  }
}

<h1 class="marquee">
  <span>The only thing that matters now is everything You think of me</span>
</h1>

<p class="marquee">
  <span>Beware of short texts!</span>
</p>

我试图通过仅使用 CSS 来解决这个问题，但我仍然找不到解决方案。是的，我可以使用 JS 并避免将动画赋予较小的元素。但也许有一种方法可以仅使用 CSS 为 Safari 修复这些问题。

【问题讨论】：

标签： html css ios safari

【解决方案1】：

我的同事用这种方式重写了动画，它可以由 Safari 处理。对我们来说很明显，这种颤抖是由使用 translate + margin 引起的，这就是为什么我什至在标题中提到它的原因。您可能知道，最好避免使用边距动画。因此，我们添加了具有相反方向动画的包装器。是的，现在我们有 2 个动画，但它们被浏览器处理得更好，而不是一个同时具有平移和边距的动画

.marquee {
  position: relative;
  overflow: hidden;
  background: rgb(161, 61, 175);
  color: #fff;
}

.marquee-wrapper {
  width: 100%;
  animation: marquee-wrapper 4s ease-in-out infinite;  
}

.marquee span {
  display: inline-block;
  min-width: 100%; /* this is to prevent shorter text animate to right */
  white-space: nowrap;
  font-size: 2.5em;
  animation: marquee 4s ease-in-out infinite;
}

@keyframes marquee {
  0% {
    transform: translateX(0);
  }

  10% {
    transform: translateX(0);
  }

  90% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(-100%);
  }
}

@keyframes marquee-wrapper {
  0% {
    transform: translateX(0);
  }

  10% {
    transform: translateX(0);
  }

  90% {
    transform: translateX(100%);
  }

  100% {
    transform: translateX(100%);
  }
}

<div class="marquee">
  <div class="marquee-wrapper">
    <span>
      The only thing that matters now is everything You think of me
      The only thing that matters now is everything You think of me
    </span>  
  </div>
</div>
<br/>
<div class="marquee">
  <div class="marquee-wrapper">
    <span>Beware of short texts!</span> 
  </div>
</div>

【讨论】：