CSS动画向右消失并从左侧重新出现答案

【问题标题】：CSS animation to disappear toward right and reappear from leftCSS动画向右消失并从左侧重新出现
【发布时间】：2021-11-16 14:20:21
【问题描述】：

我正在尝试制作一个类似于本网站顶部的动画 >>> http://www.randstadusa.com。所以，我正在使用 CSS @keyframes。我能够将箭头向左移动并消失，但我希望它们从左侧重新出现。关于如何使用 css 或其他方法执行此操作的任何想法？到目前为止，这是我：

.arrow {
    position: absolute;
    left: 50%;
    height: 2em;
    width: 2em;
    color: white;
    animation-duration: 10s;
    animation-timing-function: ease;
    animation-delay: 1.5s;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-fill-mode: forwards;
    animation-play-state: running;
    animation-name: arrows_animation;

}
@keyframes arrows_animation {
    0% {left: 50%;}
    50% {left: 70%;}
    100% {left: 10000px;}

}

<div style="background-color: black; overflow: hidden; height: 200px; width: 100%;">
    <div class="arrow">
        SOME TEXT
    </div>
</div>

【问题讨论】：

欢迎来到 Stack Overflow！寻求代码帮助的问题必须包括在问题本身最好在Stack Snippet 中重现它所需的最短代码。见How to create a Minimal, Reproducible Example
欢迎来到 SO！我建议所有新访问者阅读How to Ask，以获取有关撰写最能帮助社区提供帮助的帖子的提示。仅关键帧的 CSS 不足以为您提供太多指导 - 最好包括带有 HTML 的 minimal reproducible example 和其他 CSS。

标签： css animation

【解决方案1】：

示例站点中的移动特征为：从屏幕开始，从左侧快速进入到略高于中点的位置，缓慢移动一小段距离，然后向右射出屏幕。

这个 sn-p 实现了这一点，首先用负 translateX 将元素保持在屏幕左侧，然后在动画的前 10% 内移动到中心的右侧，因此在 1 秒内，然后仅移动 5%接下来 80% 的动画（即 8 秒）的屏幕宽度，然后在动画的剩余部分向右射击。

更改动画的 %s 以获得所需的时间。

请注意，动画元素的固定宽度为 2em，不足以容纳文本，因此对于已删除的此演示，否则文本的一小部分会在开头从左侧窥视。

.arrow {
  position: absolute;
  height: 2em;
  color: white;
  animation-duration: 10s;
  animation-timing-function: ease;
  animation-delay: 1.5s;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-play-state: running;
  animation-name: arrows_animation;
  transform: translateX(-100%);
}

@keyframes arrows_animation {
  0% {
    animation-timing-function: ease-out;
  }
  10% {
    animation-timing-function: ease-in;
    transform: translateX(60vw);
  }
  90% {
    animation-timing-function: ease-out;
    transform: translateX(65vw);
  }
  100% {
    transform: translateX(100vw);
  }
}

<div style="background-color: black; overflow: hidden; height: 200px; width: 100%;">
  <div class="arrow">
    SOME TEXT
  </div>
</div>

注意：fill-mode-forwards 已被移除，因为它会在动画结束时将元素粘在屏幕右侧，我们希望它回到屏幕左侧。此外，元素的初始位置在屏幕外，因此在其开始存在初始延迟时它不会显示。

【讨论】：

【解决方案2】：

这是一个如何做到这一点的例子。我将方向从左向右切换，并将元素移出身体，溢出：隐藏。变换使元素居中。

@keyframes example {
  0%  {
    left: 50%;
    transform: translateX(-50%);
  }
  49% {
    left: -100px;
    transform: translateX(-50%);
  }
  50% {
    left: inherit; 
    right: -100px;
    transform: translateX(50%);
  }
  51%  {
    left: inherit; 
    right: -100px;
    transform: translateX(50%);
  }
  100% {
    left: inherit; 
    right: 50%;
    transform: translateX(50%);
  }
}

body {
  overflow: hidden;
}

div {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}

&lt;div&gt;&lt;/div&gt;

【讨论】：