CSS Animation滚动文本（translate3d）在Edge浏览器无法运行问题

我之前也碰到过类似的CSS动画兼容性问题，你的滚动文本在Edge里不生效，主要是因为Edge（尤其是旧版EdgeHTML内核的版本）对CSS动画属性和布局的处理和Chrome存在差异，下面是具体的解决方案：

问题分析 #

1. 旧版Edge的前缀支持：旧版Edge使用EdgeHTML内核，需要为@keyframes和animation系列属性添加-ms-前缀才能被正确识别；
2. 布局计算差异：Chrome和Edge对inline-block元素的宽度计算、padding与容器的交互处理有细微差别，导致滚动动画的起始/结束位置计算异常，进而无法正常滚动。

修改后的完整代码 #

CSS部分 #

/* 兼容旧版Edge的动画前缀 */
@-ms-keyframes ticker {
  0% { -ms-transform: translate3d(0, 0, 0); }
  100% { -ms-transform: translate3d(-100%, 0, 0); }
}
@keyframes ticker {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-100%, 0, 0); }
}

.tcontainer{ 
  width: 100%; 
  overflow: hidden;
  display: block; /* 确保容器为标准块级，避免Edge布局塌陷 */
}
.ticker-wrap { 
  width: 100%; 
  padding-left: 100%; 
  background-color: #eee;
  display: flex; /* 用flex布局替代默认流，提升Edge布局稳定性 */
}
.ticker-move { 
  display: flex; /* 替换inline-block为flex，解决宽度计算差异 */
  white-space: nowrap; 
  padding-right: 100%; 
  animation-iteration-count: infinite; 
  animation-timing-function: linear; 
  animation-name: ticker; 
  animation-duration: 10s;
  /* 兼容旧版Edge的动画属性前缀 */
  -ms-animation-iteration-count: infinite;
  -ms-animation-timing-function: linear;
  -ms-animation-name: ticker;
  -ms-animation-duration: 10s;
}
.ticker-move:hover{ 
  animation-play-state: paused;
  -ms-animation-play-state: paused;
}
.ticker-item{ 
  display: flex;
  align-items: center; /* 让文本垂直居中，优化显示效果 */
  padding: 0 2rem; 
}

HTML部分（保持不变） #

<div class="tcontainer">
 <div class="ticker-wrap">
  <div class="ticker-move">
   <div class="ticker-item">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
   <div class="ticker-item">Aliquam consequat varius consequat.</div>
   <div class="ticker-item">Fusce dapibus turpis vel nisi malesuada sollicitudin.</div>
   <div class="ticker-item">Pellentesque auctor molestie orci ut blandit.</div>
  </div>
 </div>
</div>

修改说明 #

• 添加前缀：为旧版Edge补充-ms-前缀，确保动画规则和属性能被内核识别；
• 改用flex布局：替换inline-block为flex布局，消除Chrome和Edge之间的宽度计算差异，让滚动动画的路径更稳定；
• 容器显式声明：给.tcontainer加上display: block，避免Edge中可能出现的布局塌陷问题。

修改后不管是新版Chromium Edge还是旧版EdgeHTML Edge，滚动文本都能正常运行，同时保留了hover暂停的交互效果。

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