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

Question

我正在尝试制作一个类似于本网站顶部的动画 >>> 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>

Answer 1

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

@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;
}

<div></div>

Answer 2

示例站点中的移动特点是：从屏幕外开始，从左侧快速进入略高于中途的点，缓慢移动一小段距离，然后向右侧射击。

此代码段通过首先使用负 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 已被删除，因为它会在动画结束时将元素粘在屏幕右侧，我们希望它回到屏幕左侧。此外，该元素的初始位置在屏幕外，因此在其开始有初始延迟时不会显示。

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

CSS animation to disappear toward right and reappear from left

css

animation