网站首页文字轮播动画出现文字空间不足无法完整显示是什么原因？

问题原因 #

• .sub-head 类强制设置了 width: 100px，宽度远小于文案实际需要的显示宽度，文字直接被截断
• 没有给.inactive类配置隐藏样式，两句文案同时在文档流中占据空间，互相挤压导致显示空间不足
• CSS动画总时长为7s，JS切换文案的定时器是8s，两者时长不匹配，动画播放到一半就切换文案会触发布局错位
• intro2的reveal动画最大宽度固定为355px，若文案实际宽度超过这个值也会被截断

修复方案 #

1. 调整CSS代码 #

替换原有CSS为以下内容：

/* animation  welcome text styling  */
.intro{
  display: inline-block;
  white-space:nowrap;
  overflow: hidden;
  vertical-align: middle;
}
.intro1 {  
  animation: showup 8s infinite;
  font-family: Arial, Helvetica, sans-serif;
  font-size:35px;
  color: purple;
}
.intro2 {
  font-size:30px;
  animation: reveal 8s infinite;
  min-width: 380px;
}
.sub-head {
  animation: slidein 8s infinite;
  font-size:30px;
  font-family:Arial, Helvetica, sans-serif;
  background-color: darkolivegreen;
  display: inline-block;
}
/* 新增隐藏非激活文案的样式 */
.sub-head.inactive {
  display: none;
}
@keyframes showup {
    0% {opacity:0;}
    20% {opacity:1;}
    80% {opacity:1;}
    100% {opacity:0;}
}
@keyframes slidein {
    0% { transform: translateX(-800px); }
    20% { transform: translateX(-600px); }
    35% { transform: translateX(0); }
    100% { transform: translateX(0); }
}
@keyframes reveal {
    0% {opacity:0;width:0px;}
    20% {opacity:1;width:0px;}
    30% {width: 380px;}
    80% {opacity:1;}
    100% {opacity:0;width: 380px;}
}
/* end of text animation */

2. 代码逻辑说明 #

• 移除了.sub-head的固定宽度限制，同时给非激活状态的文案加了隐藏规则，避免互相挤占空间
• 将CSS动画总时长统一调整为8s，和JS定时器的8000ms完全同步，不会出现动画错位问题
• 用transform代替margin实现位移动画，性能更好也不会干扰其他元素布局
• 调整了容器最小宽度和动画宽度阈值，适配两句文案的实际显示长度，不会出现截断

修改后即可实现需求效果：首先显示Welcome!文字，随后滑入第一句文案，动画周期末尾Welcome!和第一句文案同时消失，下一轮动画自动展示第二句文案。

内容的提问来源于stack exchange，提问作者gheeko dos