实现无限移动线条动画：解决线条回退延迟、需立即归位左侧的问题

你的问题出在原动画的关键帧设置上：50%,100%{left:100%;} 这会让线条移动到右侧后，停留在该位置直到动画周期结束（后半段3秒完全静止），因此循环时会出现明显延迟。要实现线条一移出屏幕就立刻回到左侧，需要调整关键帧逻辑，让动画全程无停顿。

方案一：调整left属性的关键帧 #

直接修改动画的起始和结束位置，确保线条完全移出右侧后立刻回到左侧初始状态：

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    background-color: #222;
    color: #fff;
}

.navbar{
    padding: 2rem;
    position: relative;
    overflow: hidden; /* 可选，防止线条移出时触发滚动条 */
}

.navbar span{
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    width: 100px;
    background-color: #fff;
    animation: animate 6s linear infinite;
}

@keyframes animate {
    0%{
        left: -100px; /* 线条完全隐藏在左侧可视区域外 */
    }
    100%{
        left: calc(100% + 100px); /* 线条完全移出右侧可视区域外 */
    }
}

<nav class="navbar">
    <span></span>
</nav>

方案二：使用transform实现（性能更优） #

transform属性不会触发浏览器重排，动画性能更出色，适合这类位移场景：

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    background-color: #222;
    color: #fff;
}

.navbar{
    padding: 2rem;
    position: relative;
    overflow: hidden;
}

.navbar span{
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    width: 100px;
    background-color: #fff;
    animation: animate 6s linear infinite;
}

@keyframes animate {
    0%{
        transform: translateX(-100%); /* 初始位置：完全在左侧可视区域外 */
    }
    100%{
        transform: translateX(calc(100vw + 100px)); /* 结束位置：完全移出右侧可视区域外 */
    }
}

核心修改逻辑 #

• 移除原动画中50%的关键帧，让动画从起始位置平滑移动到完全离开屏幕的位置
• 确保结束位置是线条彻底脱离可视区域的坐标，避免循环时出现视觉断层
• 保留linear缓动函数维持匀速移动，保证循环的流畅衔接

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