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

这是我在这个网站上的第一个问题，所以任何关于如何编辑未来内容的建议都将被感激地接受

现在，我有一个从左到右显示的文本，就像在一个字幕中一样，带有一个动画，可以在30秒内滚动单词

我的问题是，即使动画做了我想要的，它的行为与动画的速度奇怪，当文本未完全显示在字幕上时，它将以恒定的速度移动，但一旦到达文本的结尾，它将以非常明显的方式减慢动画

这是我现在掌握的代码：

HTML:

我已经创建了一个HTML和CSS，我有：

编辑： 稍微触摸一下smart的CSS类stops small后，我发现破坏动画的是文本对齐属性

此更新的小提琴显示：

编辑2： 在上一个提琴中，我删除了类的大部分属性，在这个提琴中，唯一被删除的是

text align:center并且动画似乎工作得很好：

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

谢谢
 现在没有太多时间来解释它背后的实际原理，
但我不能告诉你是什么原因造成的：
-webkit盒子方向：垂直


。智能停止小动作{
字号：1.9em；
文本对齐：居中；
线高：3.8em；
显示：阻止；/*非webkit的回退*/
显示：-网络工具包盒；
最大宽度：400px；
高度：3.8em；/*非webkit的回退*/
保证金：0自动；
-webkit线夹：2个；
/*-网络工具包盒方向：垂直*/
溢出：隐藏；
文本溢出：省略号；
}
/*把它做成一个大帐篷*/
马奎尔先生{
保证金：0自动；
溢出：隐藏；
空白：nowrap；
框大小：边框框；
动画：字幕30s线性无限；
}
/*让它动起来*/
@关键帧选框{
0%{文本缩进：15em}
100%{文本缩进：-55em}
}

{A-B}
{A-B-C-D-E-F-G-H-I-J-K-etc}
发生这种情况是因为您正在指定
文本对齐：居中到正在设置动画的
。删除这条线，动画将平滑流动

CSS

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

。智能停止小动作{
字号：1.9em；
text align:center；/*如果要寻找非常平滑的过渡，应该查看
transform
属性。下面是使用transform的选框示例：

（我在字幕内容中添加了灰色背景，这样你就可以看到字幕是如何移动的）

主要变化是：


。智能停止小动作{
字号：1.9em；
文本溢出：省略号；
文本对齐：居中；
背景：#CCC；
}
马奎尔先生{
溢出：隐藏；
空白：nowrap；
框大小：边框框；
}
.字幕滚动条{
转化：translateX（100%）；
动画：字幕10s线性无限；
}
@关键帧选框{
0%{transform:translateX（100%）；}
100%{transform:translateX（-100%）；}
}

A B C D E F G H I J K L M等
之所以发生这种情况，是因为您将
文本对齐：居中；
分配给您的文本。谢谢Hunter，这就是我发现的，现在，有什么解释吗？@HunterTurner您介意将您的评论作为答案发布，以便我可以接受并关闭问题吗？谢谢您的回答，但当我保持原样时，就没有了问题是，当我将“text align:center；”属性添加到smart stops small类时会出现问题。我尝试过这样做，但现在面临的问题是动画运行平稳，但不会显示整个文本。请尝试向
添加宽度值。smart stops small{}
，例如
宽度：2000px；
，它将显示该框架内的所有文本。
.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 }
}

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