CSS影片向右消失并從左側重新出現-有解無憂

我正在嘗試制作一個類似于本網站頂部的影片 >>> 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>

uj5u.com熱心網友回復：

示例站點的移動特點是：從螢屏開始，從左側快速進入到略大于中途的點，然后緩慢移動一小段距離，然后向右螢屏外射擊。

此代碼段通過首先使用負 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 已被移除，因為它會在影片結束時將元素粘在螢屏右側，我們希望它回到螢屏左側。此外，元素的初始位置在螢屏外，因此在其開始的初始延遲期間不會顯示。

uj5u.com熱心網友回復：

這是一個如何做到這一點的例子。我從左到右切換方向，并將元素移出主體，溢位：隱藏。變換使元素居中。

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

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/361430.html

標籤：css 动画片

上一篇：iOS15SwiftUIVStack影片不會將行作為影片的一部分

下一篇：如何回圈這個影片，V2