Блог

Я пытаюсь создать анимацию шатра, но мне не удается сделать ее идеальной. Как вы можете видеть, когда логотип выходит за пределы страницы, он не возвращается с другой стороны напрямую.

Я бы хотел, чтобы, когда логотип выходит слева, он должен мгновенно возвращаться справа.

 .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>

  

Вы пробовали делать что-то вроде:

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

Основная проблема с тем, что у вас есть для меня прямо сейчас, заключается в том, что для перехода с 25% анимации left: 100% на right: 100%; я думаю, это может быть то, что у вас не работает.

Обновить

Я проверил какой-то другой вариант, и, возможно, этот скрипт может помочь вам.

Я нашел этот проект https://github.com/mxmzb/react-marquee-slider . Что позволяет мне делать то, что я именно хотел

Вот результат https://cargouet.com /