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

Posted 2023-02-23

【中文标题】Safari中颤抖的css运行文本动画（边距+翻译）

【英文标题】：Trembling css running text animation(margin + translate) in Safari

【发布时间】：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 修复这些问题。

【参考方案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>