时间戳

首页 > 解决方案 > 如何制作一个永远不会让视图空白的选框动画？有图像

javascript - 如何制作一个永远不会让视图空白的选框动画？有图像

问题描述

我正在尝试制作一个选框动画，但我无法使其完美。正如您所看到的，当徽标离开页面时，它不会直接从另一侧返回。

我希望当一个标志从左边出来时，它必须立即从右边回来。

在此处输入图像描述

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

标签： javascripthtmlcssreactjsanimation

解决方案

您是否尝试过执行以下操作：

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

你现在对我来说的主要问题是它需要 25% 的动画才能从 更改left: 100%为right: 100%;我认为这可能对你不起作用。

更新

我检查了其他一些选项，也许这个脚本可以为你解决问题。

推荐阅读