如何重置和重復CSS影片？-有解無憂

我創建了下面的影片，它應該運行兩幀，然后重置并再次從頭開始，最長運行 25-30 秒。

在重置影片時，我遇到了一些問題，因為它們已經相互嵌套和延遲。當重復單詞滾動時，它會在框架已經在視圖中并且沒有時間再次“旋轉回來”時運行。

如何重置影片并像第一次迭代一樣從頭開始下一次迭代，而不會搞砸時間？

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body,
#banner {
  width: 320px;
  height: 320px;
  border: 1px solid black;
  position: relative;
  color: #fff;
  overflow: hidden;
}

#banner {
  background: #000;
  display: flex;
  flex-direction: row;
}

#frame-1,
#frame-2 {
  padding: 30px;
  font-size: 50px;
  width: 100%;
  height: 100%;
  position: absolute;
}

#frame-1,
#frame-2 {
  transform: translateX(150%);
}

.words {
  font-family: sans-serif;
  font-size: 20px;
  line-height: 22px;
  height: 22px;
}

.wordlist {
  position: relative;
  overflow: hidden;
  flex-grow: 1;
  padding-left: 8px;
}

.word {
  position: absolute;
  display: block;
  transform: translateY(50px);
}

.word:nth-child(1) {
  transform: translateY(0px);
}

.subheading__container {
  display: flex;
  flex-direction: row;
}

.first {
  animation: 2s ease-out 0.75s forwards slide-out;
}

.second {
  animation: 2.5s ease-out 1.5s forwards slide-in-out;
}

.third {
  animation: 2.5s ease-out 3.15s forwards slide-in-out;
}

.fourth {
  animation: 2s ease-out 4.75s forwards slide-in;
}

.slide-in-animation-1 {
  animation: 8s ease-in 1s forwards start-animation;
}

.slide-in-animation-2 {
  animation: 8s ease-in 9s forwards start-animation;
}

@keyframes start-animation {
  0% {
    transform: translateX(150%);
    display: block;
  }
  4% {
    transform: translateX(0%);
  }
  50% {
    transform: translateX(0%);
  }
  96% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-150%);
    display: none;
  }
}

@keyframes slide-out {
  50% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-50px);
  }
}

@keyframes slide-in-out {
  0% {
    transform: translateY(50px);
  }
  25%,
  75% {
    transform: translateY(0px);
  }
  100% {
    transform: translateY(-50px);
  }
}

@keyframes slide-in {
  0% {
    transform: translateY(50px);
  }
  25%,
  100% {
    transform: translateY(0px);
  }
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <style>

  </style>
</head>

<body>
  <div id="banner">
    <div id="frame-1" class="slide-in-animation-1">
      <div class="frame-1__container">
        <p class="text">This is</p>
        <p class="text">heading</p>
        <div class="subheading__container">
          <p class="subheading words">This&nbsp;is</p>
          <p class="words wordlist">
            <span class="word first">the first word</span>
            <span class="word second">the second word</span>
            <span class="word third">third word</span>
            <span class="word fourth">fourth word</span>
          </p>
        </div>
      </div>
    </div>
    <div id="frame-2" class="slide-in-animation-2">
      <div class="frame-2__container">
        <p class="text">Lorem</p>
        <p class="text">Ipsum</p>
        <p class="text">Dolor</p>
      </div>
    </div>
  </div>
</body>

</html>

uj5u.com熱心網友回復：

您不需要 Javascript 來實作這一點，因為 CSS 允許您在一個元素上擁有多個影片。

由于您只需要每個影片的兩次迭代，我們可以在每個影片元素上放置兩次，通過添加第一組影片整體花費的 17 秒來更改第二個的等待時間。

必須對第一個和最后一個單詞影片進行一些額外的調整，以確保它們在第二組影片中正確顯示。第四個單詞在其影片結束時進入不透明度 0，因此它不會顯示第二輪開始，并且其影片持續時間相應增加。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body,
#banner {
  width: 320px;
  height: 320px;
  border: 1px solid black;
  position: relative;
  color: #fff;
  overflow: hidden;
}

#banner {
  background: #000;
  display: flex;
  flex-direction: row;
  --t: 17s;
  /* overall time for one complete animation */
  --i: 2;
  /* number of iterations of the complete animation */
}

#frame-1,
#frame-2 {
  padding: 30px;
  font-size: 50px;
  width: 100%;
  height: 100%;
  position: absolute;
}

#frame-1,
#frame-2 {
  transform: translateX(150%);
}

.words {
  font-family: sans-serif;
  font-size: 20px;
  line-height: 22px;
  height: 22px;
}

.wordlist {
  position: relative;
  overflow: hidden;
  flex-grow: 1;
  padding-left: 8px;
}

.word {
  position: absolute;
  display: block;
  transform: translateY(50px);
}

.subheading__container {
  display: flex;
  flex-direction: row;
}

.first {
  animation: 2s ease-out 0.75s forwards slide-out, 2s ease-out calc(17s   0.75s) forwards slide-out;
}

.second {
  animation: 2.5s ease-out 1.5s forwards slide-in-out, 2.5s ease-out calc(17s   1.5s) forwards slide-in-out;
}

.third {
  animation: 2.5s ease-out 3.15s forwards slide-in-out, 2.5s ease-out calc(17s   3.15s) forwards slide-in-out;
}

.fourth {
  animation: 4s ease-out 4.75s forwards slide-in, 4s ease-out calc(17s   4.75s) forwards slide-in;
}

.slide-in-animation-1 {
  animation: 8s ease-in 1s forwards start-animation, 8s ease-in calc(17s   1s) forwards start-animation;
}

.slide-in-animation-2 {
  animation: 8s ease-in 9s forwards start-animation, 8s ease-in calc(17s   9s) forwards start-animation-and-remain;
}

@keyframes start-animation {
  0% {
    transform: translateX(150%);
    display: block;
  }
  4% {
    transform: translateX(0%);
  }
  50% {
    transform: translateX(0%);
  }
  96% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-150%);
    display: none;
  }
}

@keyframes start-animation-and-remain {
  0% {
    transform: translateX(150%);
    display: block;
  }
  4% {
    transform: translateX(0%);
  }
  50%,
  100% {
    transform: translateX(0%);
  }
}

@keyframes start-animation-and-remain {
  0% {
    transform: translateX(150%);
    display: block;
  }
  4% {
    transform: translateX(0%);
  }
  50%,
  100% {
    transform: translateX(0%);
  }
}

@keyframes slide-out {
  0%,
  50% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-50px);
  }
}

@keyframes slide-in-out {
  0% {
    transform: translateY(50px);
  }
  25%,
  75% {
    transform: translateY(0px);
  }
  100% {
    transform: translateY(-50px);
  }
}

@keyframes slide-in {
  0% {
    transform: translateY(50px);
    opacity: 1;
  }
  15%,
  99.99% {
    transform: translateY(0px);
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(0px);
  }
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>

</head>

<body>
  <div id="banner">
    <div id="frame-1" class="slide-in-animation-1">
      <div class="frame-1__container">
        <p class="text">This is</p>
        <p class="text">heading</p>
        <div class="subheading__container">
          <p class="subheading words">This&nbsp;is</p>
          <p class="words wordlist">
            <span class="word first">the first word</span>
            <span class="word second">the second word</span>
            <span class="word third">third word</span>
            <span class="word fourth">fourth word</span>
          </p>
        </div>
      </div>
    </div>
    <div id="frame-2" class="slide-in-animation-2">
      <div class="frame-2__container">
        <p class="text">Lorem</p>
        <p class="text">Ipsum</p>
        <p class="text">Dolor</p>
      </div>
    </div>
  </div>
</body>

</html>

uj5u.com熱心網友回復：

要正確重置整個影片，使其干凈且一致，我認為最好的方法是通過自己替換它們來使它們再次出現。要反復制作，您可以使用setInterval

這是一個基本示例：

const secondsToResetAnimation = 2000;

setInterval( function(){
  const animatedElement = document.getElementById('animation-reset') ;
  const clonedElement = animatedElement.cloneNode(true);
  animatedElement.parentNode.replaceChild(clonedElement, animatedElement);  
}, secondsToResetAnimation );

#animation-reset{
  position:absolute;
  animation: moveit 1s forwards;
}

@keyframes moveit {
  0% {
    left: 0;
  }
  100% {
    left: 50%;
  }
}

<h2 id="animation-reset">Basic animation reset</h2>

在您的情況下，如果我沒有誤解，您需要在重置整個影片之前進行第一次重置。這可能需要您定義克隆代碼的哪些部分。通過使用上面提到的相同技術，它看起來像這樣：

const milisecondsFirstReset = 500;
const milisecondsSecondReset = 2000;

function resetAnimation(){
  //First Reset
  setTimeout( function(){ regenerateElements() }, milisecondsFirstReset );
  //Second Reset
  setTimeout( function(){ regenerateElements() }, milisecondsSecondReset );
}

// Run the Reset the first time
resetAnimation();

// Keep repeating the reset
setInterval( function(){ resetAnimation() }, milisecondsSecondReset);

function regenerateElements(){
  const animatedElement = document.getElementById('animation-reset') ;
  const clonedElement = animatedElement.cloneNode(true);
  animatedElement.parentNode.replaceChild(clonedElement, animatedElement);
}

#animation-reset{
  position:absolute;
  animation: moveit 1.5s forwards;
}

@keyframes moveit {
  0% {
    left: 0;
  }
  100% {
    left: 50%;
  }
}

<h2 id="animation-reset">Animation Reset</h2>

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

標籤：javascript css 动画 CSS动画

上一篇：MatplotlibFuncAnimation圖的第一個間隔沒有出現

下一篇：顫振SizeTransition導致容器邊界半徑無法正常作業