HTML <marquee>样式CSS动画Bug求助：自定义滚动动画异常

我看了你的代码，发现两个核心问题导致动画无法正常运行，下面是具体的排查和修复方案：

问题分析 #

• 关键帧定义不完整：你的@keyframes navscroll只写了0%的状态，缺少100%的结束状态，浏览器无法确定动画的完整路径，自然无法正常播放。
• 初始偏移逻辑不符合预期：你用transform: translateX(100%)是相对于元素自身宽度的偏移（向右移动自身宽度的距离），但要实现类似<marquee>从右到左滚动的效果，应该让元素从容器的右侧外部开始，滚动到左侧外部结束，所以需要调整偏移的参考基准。

修复后的完整代码 #

<div class="navscroll">
  <div>我是滚动的内容</div>
</div>

<style>
.navscroll {
  width: 100%;
  height: 100px;
  padding: 5px;
  overflow: hidden;
  position: relative;
  background-color: red;
}

.navscroll div {
  position: absolute; /* 改为absolute，避免占据容器空间，确保滚动路径不受影响 */
  left: 0;
  top: 50%;
  transform: translateY(-50%) translateX(100%); /* 先垂直居中，再初始定位到容器右侧 */
  width: 200px;
  height: 90px; /* 减去容器的padding，避免超出高度 */
  line-height: 90px;
  text-align: center;
  background-color: blue;
  opacity: 1;
  border-radius: 5px;
  animation: navscroll 15s linear infinite;
}

@keyframes navscroll {
  0% {
    transform: translateY(-50%) translateX(100vw); /* 初始位置：容器右侧外部（基于视窗宽度） */
  }
  100% {
    transform: translateY(-50%) translateX(-200px); /* 结束位置：元素完全移出容器左侧（基于元素自身宽度） */
  }
}
</style>

关键修改说明 #

• 补全关键帧：添加了100%的状态，明确动画的结束位置，让浏览器能计算完整的滚动路径。
• 调整元素定位：把内部div的position从relative改为absolute，配合top:50%和transform: translateY(-50%)实现垂直居中，同时避免元素占据容器空间导致的布局干扰。
• 优化偏移逻辑：初始位置用translateX(100vw)让元素完全在视窗右侧（也就是容器右侧外部），结束位置用translateX(-200px)让元素完全移出容器左侧，这样就能实现流畅的从右到左滚动效果。
• 适配容器padding：调整内部div的高度为90px（容器高度100px减去上下padding各5px），避免元素超出容器高度。

这样修改后，你的模拟<marquee>动画就能正常运行了。

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