Css 我如何制作这个'；电梯门'；显示文本更平滑的动画？

我目前正在努力寻找一个可能很好的动画效果。我接近了我想要的，但是动画突然结束，并且以一种丑陋的方式加上它只移动到一边

我想在我的文本中实现某种“电梯门”效果。我只有两个首字母“CV”，当剩下的文字逐渐消失时，它们会彼此分开。到目前为止，我得到的是：

.content{
显示：网格；
放置项目：中心；
}
.淡入{
显示：内联块；
动画：textfadein2s线性；
}
@关键帧textFadeIn{
0% {
不透明度：0；
宽度：0；
}
90% {
不透明度：0；
}
100% {
不透明度：1；
宽度：6em；
}
}
.亮点{
颜色：青色；
}
.bold{
字体大小：粗体；
}

课程
维泰

最大宽度动画在这里可以做得很好：

.cvPrimary{
文本对齐：居中
}
.主要跨度{
最大宽度：20px；/*您可能需要调整此宽度*/
溢出：隐藏；
显示：内联块；
空白：nowrap；
颜色：透明；
动画：文本Fadein 2s 0.5s向前
}
.cv主跨度：第一个字母{
颜色：青色；
}
@关键帧textFadeIn{
70% {
颜色：透明；
}
100% {
最大宽度：200px；/*此处的值很大*/
颜色：#000
}
}

课程
维泰

非常好的尝试。 让我们调查一下您的问题发生的原因

为什么只有C字母向左移动，而V在设置动画时保持其位置

正如您在这个屏幕截图上看到的，左C块和右V块以相同的速度增长，在这种情况下，C可以向左移动，但V不能，因为h1块已经在容器内居中

为什么动画会突然结束

动画结束后，CSS样式将恢复到最初没有动画的状态。所以，若结束动画和并没有动画的风格不同，会发生什么？样式将突然从结束动画更改为无动画。这可以通过

动画填充模式解决：向前

让我们来看看解决方案

首先，我们应该在关键帧动画上有每个淡入块的精确宽度。所以我们应该有两个关键帧，一个用于左侧（C），另一个用于右侧（V）

.content{
显示器：flex；
证明内容：中心；
}
.淡入{
显示：内联块；
动画填充模式：正向；
动画持续时间：2秒；
动画计时功能：线性；
溢出：隐藏；
垂直对齐：底部对齐；
}
。淡入。左侧{
动画名称：textFadeInLeft；
}
。淡入。右侧{
动画名称：textFadeInRight；
}
@关键帧textFadeInLeft{
0% {
不透明度：0；
最大宽度：0；
}
90% {
不透明度：0；
}
100% {
不透明度：1；
最大宽度：4.375em；
}
}
@关键帧textFadeInRight{
0% {
不透明度：0；
最大宽度：0；
/*右边距：70像素*/
}
90% {
不透明度：0；
}
100% {
不透明度：1；
最大宽度：1.5625em；
/*右边距：0*/
}
}
.亮点{
颜色：青色；
}
.bold{
字体大小：粗体；
显示：内联块；
垂直对齐：底部对齐；
}

课程
维泰

您想让V移动吗？字母是在V之后添加的，而不是在V之前添加的，所以像课程中的C那样从中心移开是行不通的。是的，你是对的，但它应该移动一点，因为在“C”旁边出现的文本将不再居中。然而，C移动得太远了，然后它就把两个Ruberband放在一起了。