时间戳

首页 > 解决方案 > 如何使用 CSS 为图像设置动画以移出 div 并从另一侧返回到相同位置？

html - 如何使用 CSS 为图像设置动画以移出 div 并从另一侧返回到相同位置？

问题描述

我正在尝试为 div 内的图像设置动画，使其向右平滑移动 100px，然后向左“传送”200px，然后向右平滑移动 100px 到原始位置。

就像在一些蛇游戏中一样，当你触摸墙壁时，它会将你传送到另一边，或者像传送门一样。但到目前为止，我只是不知道如何在 CSS 中使用带有 % 的 @keyframes 来传送它。

这是一张图片，可以更好地说明我想要实现的目标

更新：新代码，它工作得很好。谢谢@CBroe

原始 HTML：

<!DOCTYPE html>
<head>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div class="image"></div>
    </div>
</body>
</html>

原始 CSS：

.container {
    width: 200px;
    height: 80px;
    border: 1px solid black;
    overflow: hidden;
    display: grid;
    place-content: center;
}

.container .image {
    background-color: red;
    width: 50px; height: 50px;
    animation: anim 1s infinite;
}

@keyframes anim {
    0% {
        transform: translateX(0px);
    }
    50% {
        transform: translateX(500px);
    }
    50.1% {
        transform: translateX(-500px);
    }
    100% {
        transform: translateX(0px);
    }
}

标签： htmlcss

解决方案

推荐阅读