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

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 属性

这个更新的小提琴显示了它： https://jsfiddle.net/zkv1t4g6/2/

编辑 2：

在最后一个小提琴中，我删除了该类的大部分属性，在这一个中，唯一被删除的是text-align: center;，看起来动画效果很好： https://jsfiddle.net/zkv1t4g6/3/

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

谢谢！

Answer 1

发生这种情况是因为您将text-align: center; 分配给正在动画的<div>。去掉这条线，动画就流畅了。

CSS

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

JSFiddle

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>

Answer 3

如果您正在寻找一个非常平滑的过渡，您应该查看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）也在浏览器窗口自己的层中进行，这意味着浏览器不需要经常重新绘制屏幕，​​从而大大提高了渲染性能，尤其是在移动设备上。