Linux环境Firefox下CSS3文字向上滚动动画失效问题咨询

仅用HTML和CSS实现电影片尾制作人员表的向上滚动效果时，在Linux系统Firefox浏览器中动画无法正常运行，页面计划用作YouTube频道的浏览器源，已有CSS基础但无法定位故障点，原始代码如下：

原始CSS代码 #

body{
  /* General Page attributes */
  background:#000;
  font-family: 'Orbitron', sans-serif;
  text-transform:uppercase;
  text-align:center;
  margin:0;
  padding:0;
}
.container {
  white-space: nowrap;
  overflow: hidden;
}
.container div {
  animation: anim 100s linear infinite;
}
h1 {color: purple;}
p {color: teal;}

@keyframes anim {
  0% {
     transform: translate(0,0);
  }
  100% {
     transform: translate(0,-100);
  }
}

原始HTML代码 #

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <div class="container">
    <h1>Basic Setup test</h1>
    <p>lorum ipsum etc.</p>
    <p>lorum ipsum</p>
    <p>lorum ipsum reductum</p>
    <p> more stuff and things </p>
    <p><img src="Digital-Patreon-Logo_FieryCoral.png" height=100 width=100/></p>
    <p><img src="logo-color.png"/></p>
  </div>
</body>
</html>

代码共有3处直接导致动画失效的问题：

• transform: translate()的非0位移值缺少单位：代码中translate(0,-100)的-100没有添加px/%等合法长度单位，Firefox对CSS规范执行更严格，会直接丢弃无效属性值，导致动画关键帧完全不生效。
• 动画绑定选择器不匹配：样式规则写的是.container div，即选中.container内部的div子元素，但原始HTML结构里.container下直接放置的是h1、p、img标签，没有嵌套div元素，动画根本没有绑定到任何需要滚动的元素上。
• 容器样式和滚动需求冲突：给.container设置的white-space: nowrap作用是强制内容横向不换行，和纵向滚动的需求完全矛盾，且没有给容器设置固定高度、配置正确的滚动起止位置，就算动画能运行也不会出现片尾滚动的预期效果。

修复后CSS #

body{
  /* 全局页面样式 */
  background:#000;
  font-family: 'Orbitron', sans-serif;
  text-transform:uppercase;
  text-align:center;
  margin:0;
  padding:0;
}
/* 滚动视口容器 */
.credits-container {
  height: 100vh;
  overflow: hidden;
}
/* 实际执行滚动的内容层 */
.credits-content {
  animation: scrollCredits 100s linear infinite;
}
h1 {color: purple;}
p {color: teal;}

@keyframes scrollCredits {
  0% {
     transform: translateY(100vh);
  }
  100% {
     transform: translateY(-100%);
  }
}

修复后HTML #

<!DOCTYPE html>
<html>
<head>
  <!-- 如需使用Orbitron字体，请自行引入本地字体文件 -->
</head>
<body>
  <div class="credits-container">
    <div class="credits-content">
      <h1>Basic Setup test</h1>
      <p>lorum ipsum etc.</p>
      <p>lorum ipsum</p>
      <p>lorum ipsum reductum</p>
      <p> more stuff and things </p>
      <p><img src="Digital-Patreon-Logo_FieryCoral.png" height=100 width=100/></p>
      <p><img src="logo-color.png"/></p>
    </div>
  </div>
</body>
</html>

• 动画关键帧起始位置设为translateY(100vh)，是模拟电影片尾内容从屏幕底部慢慢出现的效果，如果不需要内容从底部进场的等待过程，可以把0%关键帧的值修改为translateY(0)。
• 100s的动画时长可以根据实际内容总长度调整，内容越多建议把时长设置得越长，保证滚动速度平缓舒适。
• 如果要使用代码中指定的Orbitron字体，记得在head标签内引入本地字体资源，否则字体会回退为系统默认无衬线字体。

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