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

Question

我在 CSS 中以相同的方式制作了一些运行文本动画动画，就像在答案中一样。我试图像那样实现它以避免任何 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 修复这些问题。

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

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

Trembling css running text animation(margin + translate) in Safari

html

css

safari

ios

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

Trembling css running text animation(margin + translate) in Safari

html

css

safari

ios

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