为何为span添加.words-rotate类名后文字轮换动画失效？

问题出在你的CSS选择器写法上：

span .words-rotate /* 这里的空格是错误核心 */

这个选择器的含义是匹配所有位于<span>元素内部、拥有.words-rotate类的子元素，但你的HTML结构里，<span>本身就带有.words-rotate类，所以这个选择器根本找不到需要应用动画的元素，导致动画无法运行。

修正步骤 #

把错误的选择器改成以下两种写法之一即可：

写法1：匹配带类的span元素 #

span.words-rotate {
  animation: animate 10s ease infinite;
  position: relative;
}

写法2：直接使用类选择器（更简洁） #

因为.words-rotate类已经足够标识目标元素，不需要额外的标签限定：

.words-rotate {
  animation: animate 10s ease infinite;
  position: relative;
}

完整修正后的CSS代码 #

.outer {
  position: relative;
  height: 24px;
  font-size: 24px;
}

.words-rotate {
  position: absolute;
  overflow: hidden;
  height: 30px;
  line-height: 35px;
  font-size: 24px;
  display: inline-block;
  margin-left: 5px;
  margin-top: 1px;
  margin-bottom: 0px;
  animation: animate 10s ease infinite;
  position: relative;
}

@keyframes animate {
  0% { top: 0 }
  20% { top: 0 }
  25% { top: -34px }
  45% { top: -34px }
  50% { top: -69px }
  70% { top: -69px }
  75% { top: -105px }
  95% { top: -105px }
  100% { top: 0 }
}

另外可以检查动画里的top偏移值，当前的-34px、-69px、-105px和行高35px的间隔匹配，能保证每个文字切换时刚好滚动一行，无需调整。

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