Javascript 从左向右淡入文本，反之亦然

我需要知道如何使文本随着div floating_掩码的增长而显示。 现在，文本在增加div的同时，当翻译结束时，文本被分成两行，因为div已经达到100%，如果它保持不变的话

。浮动{
显示器：flex；
对齐项目：居中；
填充：4px；
调整内容：灵活启动；
}
.集装箱{
z指数：1；
左边距：60像素；
右边距：20px；
}
.面具{
溢出：隐藏；
位置：相对位置；
边框：1px纯色浅灰色；
高度：54px；
宽度：54px；
过渡：宽度1s；
显示器：flex；
对齐项目：居中；
转换：translateX（2px）；
}
.按钮：悬停+遮罩{
宽度：200px；
}
.按钮{
位置：绝对位置；
边框：1px纯色浅灰色；
边界半径：50%；
背景色：白色；
填充：12px；
z指数：2；
顶部：17px；
左：17px；
}
}

偶像
消息组

消息组

试试这个css：

.container{
z指数：1；
左边距：60像素；
右边距：20px；
位置：绝对位置；
空白：nowrap；
动画：浮动文本5s无限交替轻松输入输出；
}

---

这里是小提琴：

简单的方法是在单词之间使用

。浮动{
显示器：flex；
对齐项目：居中；
填充：4px；
调整内容：灵活启动；
}
.集装箱{
z指数：1；
左边距：60像素；
右边距：20px；
}
.面具{
溢出：隐藏；
位置：相对位置；
边框：1px纯色浅灰色；
高度：54px；
宽度：54px；
过渡：宽度1s；
显示器：flex；
对齐项目：居中；
转换：translateX（2px）；
}
.按钮：悬停+遮罩{
宽度：200px；
}
.按钮{
位置：绝对位置；
边框：1px纯色浅灰色；
边界半径：50%；
背景色：白色；
填充：12px；
z指数：2；
顶部：17px；
左：17px；
}
}

偶像
消息组

消息组