如何实现小汽车从左到右移动后隐藏及从右到左的同款CSS动画

直接上修改后的可运行代码：

CSS 代码 #

/* 小汽车公共基础样式 */
.car-base {
    position: absolute;
    top: 65%;
    width: 100px;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-duration: 5s;
    animation-duration: 5s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards; /* 动画结束后保持最后一帧状态 */
}
/* 左向右移动样式 */
.car-left-to-right {
    left: 0;
    -webkit-animation-name: runLeftRight;
    animation-name: runLeftRight;
}
/* 右向左移动样式 */
.car-right-to-left {
    right: 0;
    -webkit-animation-name: runRightLeft;
    animation-name: runRightLeft;
}
@-webkit-keyframes runLeftRight {
    0% {
        left: 0;
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        left: calc(100% - 100px);
        opacity: 0; /* 移动结束后隐藏 */
    }
}
@keyframes runLeftRight {
    0% {
        left: 0;
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        left: calc(100% - 100px);
        opacity: 0;
    }
}
@-webkit-keyframes runRightLeft {
    0% {
        right: 0;
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        right: calc(100% - 100px);
        opacity: 0;
    }
}
@keyframes runRightLeft {
    0% {
        right: 0;
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        right: calc(100% - 100px);
        opacity: 0;
    }
}

HTML 代码 #

<!-- 左向右移动的小汽车 -->
<img class="car-base car-left-to-right" src="/assets/img/1car.svg" alt="car">
<!-- 右向左移动的小汽车 -->
<img class="car-base car-right-to-left" src="/assets/img/1car.svg" alt="car">

自定义调整说明 #

• 代码里的100px为小汽车预设宽度，可替换为你实际的图片尺寸，避免移动到边缘时出现溢出或留白过大的问题
• 如需两个动画先后执行，给第二个小汽车的样式添加animation-delay: 5s;即可实现第一个动画结束后再启动第二个动画
• 如需循环执行动画，给对应类添加animation-iteration-count: 循环次数;即可，填infinite为无限循环

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