如何制作一个绝不会留下空白视图的大屏幕动画？有图像

Question

我试着制作一个大屏幕动画，但我无法使它完美。正如你所看到的，当一个标志走出页面时，它不会直接从另一边回来。

我想当一个标志从左边出来的时候，它必须马上从右边回来。

​

​

.logos {
    display: flex;
    width: 100%;
    justify-content: space-evenly;

    img {
        height: 25px;
        margin: 0 20px;
        animation: defile 3s infinite linear;
        position: relative;
    }
}
@keyframes defile {
        25% {left: 0%;}
        50% {left: 100%;}
        75% {right: 100%;}
        100% {right: 0%;}
}

<div className="logos pt-5" >
    <img src="static/img/logos/NEXTJS.png" />
    <img src="static/img/logos/SOCKET.IO.png" />
    <img src="static/img/logos/NODEJS.png" />
    <img src="static/img/logos/JS.png" />
    <img src="static/img/logos/GIT.png" />
    <img src="static/img/logos/NANTES-TECH.png" />
    <img src="static/img/logos/FRENCHTECH.png" />
    <img src="static/img/logos/ANGULAR.png" />
    <img src="static/img/logos/S.png" />
    <img src="static/img/logos/DOCKER.png" />
    <img src="static/img/logos/REACT.png" />
    <img src="static/img/logos/REACT-ROUTER.png" />
</div>

Answer 1

我发现了https://github.com/mxmzb/react-marquee-slider项目。允许我做我想做的事

这是结果https://cargouet.com/

Answer 2

你有没有试过做这样的事：

@keyframes defile {
    0% { left: 0% }
    50% { left: 100% }
    51% { right: 100%; }
    100% { right: 0%; }
}

你现在给我的主要问题是，从left: 100%到right: 100%;需要25%的动画，我认为这可能不适合你。

更新

我检查了一下其他的选项，也许这个剧本可以帮你做到这一点。