文章/答案/技术大牛

发布

社区首页 >问答首页 >如何重置和重复CSS动画？

问如何重置和重复CSS动画？
EN

Stack Overflow用户

提问于 2022-08-30 20:01:06

回答 2查看 115关注 0票数 -1

我已经创建了下面的动画，应该运行两帧，然后重置和重新开始，并运行最多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>

javascript

css

animation

css-animations

回答 2

Stack Overflow用户

回答已采纳

发布于 2022-08-31 05:45:18

您不需要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>

票数 1

Stack Overflow用户

发布于 2022-08-30 21:49:23

要正确地重置整个动画，让它干净和一致，我认为最好的方法是让它们通过替换自己再次出现。要重复使用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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/73547870

复制

相似问题

问如何重置和重复CSS动画？
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何重置和重复CSS动画？EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何重置和重复CSS动画？
EN