Html 关键帧开始时出现意外倾斜

我有一个片段，它每7秒显示一个文本。然而，在每个动画开始时，它都会执行一个意外的倾斜，我不能排除这一点。你能找到它是什么吗

.chillquote{
字号：1.5em；
线高：1.5em；
文本对齐：居中；
填充：1em；
颜色：var（--车身颜色）；
高度：4em；
字体系列：var（--usedH字体堆栈）；
}
div{
显示：内联块；
溢出：隐藏；
}
div：第一种类型{
/*为了提高性能
应该使用ID/Class。
一个小的演示
现在没问题*/
动画：展示7秒无限；
}
div：类型的最后一个{
宽度：0px；
动画：展示7秒无限；
}
div：类型span的最后一个{
左边距：-50雷姆；
动画：幻灯片7秒无限；
}
@关键帧显示{
0% {
不透明度：0；
}
20% {
不透明度：1；
}
80% {
不透明度：1；
}
100% {
不透明度：0；
}
}
@关键帧幻灯片{
0% {
左边距：-800px；
}
20% {
左边距：-800px；
}
35% {
左边距：0px；
}
100% {
左边距：0px；
}
}
@关键帧显示{
0% {
不透明度：0；
宽度：0px；
}
20% {
不透明度：1；
宽度：0px；
}
30% {
宽度：自动；
}
80% {
不透明度：1；
}
100% {
不透明度：0；
宽度：自动；
}
}

Q
{{randomQ.quote}
~{{randomQ.author}}

这是因为您正在使用

内联块

来显示所有

div

当显示的文本开始显示时，在

显示

动画中设置了

宽度

为0-当它开始显示时，从0变为

自动

由于引号文本以多行开头，基线会发生变化，因此

Q

“下降”到文本基线

我已经更新了你的画笔，使

.chillquote

显示块显示，并向其他div添加了类-因为

最后一个子元素
和
第一个子元素
也影响了
.chillquote
div，因为你从未指定子元素

我还将最终宽度设置为一个百分比


.chillquote{
字号：1.5em；
线高：1.5em；
文本对齐：左对齐；
填充：1em；
颜色：var（--车身颜色）；
高度：4em；
字体系列：var（--usedH字体堆栈）；
}
.chillquote分区{
显示：内联块；
溢出：隐藏；
}
第一分区{
/*为了提高性能
应该使用ID/Class。
一个小的演示
现在没问题*/
动画：展示7秒无限；
}
第二分区{
宽度：0px；
动画：展示7秒无限；
}
第二节跨度{
左边距：-50雷姆；
动画：幻灯片7秒无限；
}
@关键帧显示{
0% {
不透明度：0；
}
20% {
不透明度：1；
}
80% {
不透明度：1；
}
100% {
不透明度：0；
}
}
@关键帧幻灯片{
0% {
左边距：-800px；
}
20% {
左边距：-800px；
}
35% {
左边距：0px；
}
100% {
左边距：0px；
}
}
@关键帧显示{
0% {
不透明度：0；
宽度：0px；
}
20% {
不透明度：1；
宽度：0px；
}
30% {
宽度：80%；
}
80% {
不透明度：1；
}
100% {
不透明度：0；
宽度：80%；
}
}

Q
这是作者的话
谢谢，这几乎解决了问题！关于
width:auto
，我尝试将其对齐在中间，因此设置任何特定的宽度（如80%），如果引号是小字符串，则会产生一个间隙。看，奇怪。因此，它在Firefox中工作得非常完美，但在chrome中却不行。过一会儿我得解决这个问题。