这是我在该网站上的第一个问题,对于如何撰写未来的问题有任何建议,我都将非常感激。
现在,我有一段文本,它从左到右显示,就像跑马灯一样,动画会在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/
现在问题发生了变化,我想知道为什么文本对齐会干扰动画速度。这两者之间的交互是什么?
谢谢!
text-align: center;
分配给了文本。 - Hunter Turner