为什么文本对齐属性会减慢文本动画速度？

Question

这是我在该网站上的第一个问题，对于如何撰写未来的问题有任何建议，我都将非常感激。

现在，我有一段文本，它从左到右显示，就像跑马灯一样，动画会在30秒内滚动这些单词。

我的问题是，即使动画做到了我想要的效果，但当文本没有完全显示在跑马灯上时，它的速度会表现出奇怪的行为，它将以恒定的速度进行，但一旦到达文本的末尾，它就会以非常显着的方式减慢动画速度。

这是我现在拥有的代码：

HTML:

<div>  
  <p id="text" class="marquee smart-stops-small">{A-B}</p>
</div>
<div>
  <p id="text" class="marquee smart-stops-small">{A-B-C-D-E-F-G-H-I-J-K-etc.}</p>
</div>

CSS：

.smart-stops-small{
  font-size: 1.9em;
  text-align: center;
  line-height: 3.8em;
  display: block; /* Fallback for non-webkit */
  display: -webkit-box;
  max-width: 400px;
  height: 3.8em; /* Fallback for non-webkit */
  margin: 0 auto;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Make it a marquee */
.marquee {
    margin: 0 auto;
    overflow: hidden;
    white-space: nowrap;
    box-sizing: border-box;
    animation: marquee 30s linear infinite;
}

/* Make it move */
@keyframes marquee {
    0%   { text-indent: 15em }
    100% { text-indent: -55em }
}

我已经创建了一个具有HTML和CSS的Fiddle： https://jsfiddle.net/zkv1t4g6/1/

编辑：

在对smart-stops-small CSS类进行一些调整后，我发现破坏动画的是text-align属性。

这个更新的fiddle可以展示出来： https://jsfiddle.net/zkv1t4g6/2/

编辑 2:

在最新的fiddle中，我删除了大多数类的属性，在这个fiddle中唯一被删除的是text-align:center; ，似乎动画效果很好： https://jsfiddle.net/zkv1t4g6/3/

现在问题发生了变化，我想知道为什么文本对齐会干扰动画速度。这两者之间的交互是什么？

谢谢！

- Joaquin Heredia

---

这是因为您将 text-align: center; 分配给了文本。 - Hunter Turner

谢谢，Hunter。我已经了解了这个问题，不过能否再解释一下吗？ - Joaquin Heredia

@HunterTurner，您能否将您的评论发布为答案，这样我就可以接受它并关闭问题了吗？ - Joaquin Heredia

Answer 1

如果您想要非常平滑的过渡效果，您应该使用 transform 属性。这是一个使用 transform 的跑马灯示例: https://jsfiddle.net/8o335a6r/。

（我已经为跑马灯内容添加了灰色背景，以便您可以看到跑马灯的移动情况）。

主要变化：

.smart-stops-small{
  font-size: 1.9em;
  text-overflow: ellipsis;
  text-align: center;
  background: #CCC;
}


.marquee {
  overflow: hidden;
  white-space: nowrap;
  box-sizing: border-box;
}


.marquee__scroll {
  transform: translateX(100%);
  animation: marquee 10s linear infinite;
}

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

<div class="marquee">
  <div class="marquee__scroll">
    <p class="marquee__content  smart-stops-small">A B C D E F G H I J K L M etc</p>
  </div>
</div>

为什么要使用transform？

使用CSS3的translate值意味着您的动画将利用子像素抗锯齿技术，这意味着浏览器可以以更多的步骤移动元素，而不是每次移动一个像素，从而实现更平滑的过渡。

翻译（使用translate）也在浏览器窗口中执行它们自己的层，这意味着浏览器不需要经常重新绘制屏幕，从而大大提高了渲染性能，特别是在移动设备上。

- Andi North

---

尝试了这个方法，但现在我面临的问题是动画运行流畅，但无法显示整个文本。 - Joaquin Heredia

尝试为 .smart-stops-small {} 添加一个宽度值，例如 width: 2000px;，这样它将显示该框架内的所有文本。 - Andi North

Answer 2

我现在没有太多时间来解释它的实际原理，但我可以告诉你引起它的原因：-webkit-box-orient: vertical;

.smart-stops-small{
  font-size: 1.9em;
  text-align: center;
  line-height: 3.8em;
  display: block; /* Fallback for non-webkit */
  display: -webkit-box;
  max-width: 400px;
  height: 3.8em; /* Fallback for non-webkit */
  margin: 0 auto;
  -webkit-line-clamp: 2;
  /*-webkit-box-orient: vertical;*/
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Make it a marquee */
.marquee {
    margin: 0 auto;
    overflow: hidden;
    white-space: nowrap;
    box-sizing: border-box;
    animation: marquee 30s linear infinite;
}

/* Make it move */
@keyframes marquee {
    0%   { text-indent: 15em }
    100% { text-indent: -55em }
}

<div>  
  <p id="text" class="marquee smart-stops-small">{A-B}</p>
</div>
<div>
  <p id="text" class="marquee smart-stops-small">{A-B-C-D-E-F-G-H-I-J-K-etc.}</p>
</div>

- arhak

---

谢谢你的回答，但是当我保持原样时，没有问题，问题出现在我给smart-stops-small类添加"text-align: center;"属性时。 - Joaquin Heredia

Answer 3

这是因为你给正在进行动画的

分配了text-align: center;。删除此行，动画就会流畅进行。

CSS

.smart-stops-small{
  font-size: 1.9em;
  text-align: center; /* <-- Remove */
  line-height: 3.8em;
  ...
}

JSFiddle

的翻译是：

JSFiddle

。

- Hunter Turner