如何用CSS实现元素向右消失后从左侧重新出现的循环动画

实现方案 #

你只需要调整动画关键帧的逻辑，加上给父容器补充相对定位属性即可实现循环效果：

1. 首先给外层容器添加position: relative，保证箭头的位置偏移是相对于外层黑底容器计算，而不是整个页面视口
2. 调整@keyframes规则，让动画开始前箭头位于容器左边界外，动画结束时箭头完全移出右边界，无限循环下就会自然从左侧重新进入，还可以增加透明度属性让出现/消失的过渡更顺滑
3. 移除.arrow的animation-fill-mode: forwards配置，无限循环场景下不需要固定最后一帧状态

修改后的完整代码如下：

CSS代码

.arrow {
    position: absolute;
    left: -10%;
    height: 2em;
    width: 2em;
    color: white;
    animation-duration: 10s;
    animation-timing-function: ease;
    animation-delay: 1.5s;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-play-state: running;
    animation-name: arrows_animation;
}
@keyframes arrows_animation {
    0% {
        left: -10%;
        opacity: 0;
    }
    5% {
        opacity: 1;
    }
    40% {
        left: 50%;
    }
    70% {
        left: 70%;
    }
    95% {
        left: 110%;
        opacity: 1;
    }
    100% {
        left: 110%;
        opacity: 0;
    }
}

HTML代码

<div style="background-color: black; overflow: hidden; height: 200px; width: 100%; position: relative;">
    <div class="arrow">
        SOME TEXT
    </div>
</div>

如果你想要实现多箭头依次轮播的效果，只需要复制多个.arrow元素，给每个元素设置不同的animation-delay值即可，比如第二个箭头延迟3s、第三个延迟4.5s，以此类推就能达到连续滚动的效果。

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