增加视频循环迭代

Question

我正在制作一个着陆视频部分，该部分有一个在后台播放的视频，根据视频，有一些文本会随着视频的时间而改变。文本动画使用关键帧。我已经让它工作了，但我被困在一个点上，即循环时延迟。

在窗口加载（视频开始）时，一切正常，但是当视频结束并重新开始循环时，视频在循环后重新启动可能会有 1 秒或几分之一秒的延迟。 “这是我的实际问题”，当视频重新启动时，关键帧延迟中的文本更改并将其迭代计数设置为无限。文本第二次与视频不匹配。当我在该部分停留一分钟时，视频与文本幻灯片不匹配。

有没有办法用 CSS 或 jQuery 延迟动画，当视频第二次开始循环时，文本会延迟。

这里是Codepen link

下面是我正在处理的代码。

body {
  background-color: #02001b;
}

.wrapper {
  position: relative;
  width: 1455px;
  height: 799px;
  margin: 0 auto;
}

.header-section section {
  width: 45%;
  height: 200px;
  margin: 0 auto;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  overflow: hidden;
}

.as-main-heading {
  color: #fff;
  text-transform: uppercase;
  font-size: 36px;
  font-weight: 300;
}

.as-main-excerpt {
  color: #fff;
  font-size: 18px;
}

.header-section .first,
.header-section .second,
.header-section .third,
.header-section .fourth {
  position: absolute;
  left: 0;
  right: 0;
  animation-duration: 12s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.header-section .first {
  animation-name: anim-1;
}

.header-section .second {
  animation-name: anim-2;
}

.header-section .third {
  animation-name: anim-3;
}

.header-section .fourth {
  animation-name: anim-4;
}

@keyframes anim-1 {
  0%,
  8% {
    opacity: 0;
    top: 54%;
  }
  8%,
  16% {
    bottom: 25%;
    top: 54%;
    opacity: 1;
  }
  25%,
  100% {
    bottom: 50%;
    top: 25%;
    opacity: 0;
  }
}

@keyframes anim-2 {
  0%,
  25% {
    opacity: 0;
  }
  32%,
  40% {
    bottom: 25%;
    opacity: 1;
  }
  50%,
  100% {
    bottom: 50%;
    opacity: 0;
  }
}

@keyframes anim-3 {
  0%,
  50% {
    opacity: 0;
  }
  58%,
  66% {
    bottom: 25%;
    opacity: 1;
  }
  75%,
  100% {
    bottom: 50%;
    opacity: 0;
  }
}

@keyframes anim-4 {
  0%,
  75% {
    opacity: 0;
  }
  81%,
  92% {
    bottom: 25%;
    opacity: 1;
  }
  100% {
    bottom: 50%;
    opacity: 0;
  }
}

<div class="wrapper">
  <video autoplay muted loop id="myVideo" height="800px;">
      <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
  </video>
  <div class="landing-header">
    <div class="header-section">
      <section>
        <h2 class="as-main-heading">Story of a bunny</h2>
        <div class="as-main-excerpt first">
          <p>Here comes a butterfly</p>
        </div>
        <div class="as-main-excerpt second">
          <p>Bunny See's the butterfly</p>
        </div>
        <div class="as-main-excerpt third">
          <p>Butterfly Sitting on the flower</p>
        </div>
        <div class="as-main-excerpt fourth">
          <p>An apple falls on the butterfly</p>
        </div>
      </section>

    </div>
  </div>
</div>

Answer 1

您可以通过在每次视频开始一个新循环时重新启动整个动画来非常简单地实现它。

要检测此事件，您可以侦听媒体事件onplaying。
要重新启动动画，您可以在父元素上设置一个类（例如 .playing），它会告诉动画何时应该处于活动状态，然后删除该类和 force a reflow 以便浏览器停用动画，最后设置回到演奏课。

var header = document.querySelector('.header-section');
myVideo.onplaying = function(e) {
  header.classList.remove('playing'); // deactivate the animation
  header.offsetWidth; // force a reflow
  header.classList.add('playing'); // reactivate the animation
} 

body {
  background-color: #02001b;
}

.wrapper {
  position: relative;
  width: 1455px;
  height: 799px;
  margin: 0 auto;
}

.header-section section {
  width: 45%;
  height: 200px;
  margin: 0 auto;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  overflow: hidden;
}

.as-main-heading {
  color: #fff;
  text-transform: uppercase;
  font-size: 36px;
  font-weight: 300;
}

.as-main-excerpt {
  color: #fff;
  font-size: 18px;
}

.header-section .first,
.header-section .second,
.header-section .third,
.header-section .fourth {
  position: absolute;
  left: 0;
  right: 0;
  animation-duration: 12s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
/* The animation is set only when the parent has the .playing class */
.header-section.playing .first {
  animation-name: anim-1;
}

.header-section.playing .second {
  animation-name: anim-2;
}

.header-section.playing .third {
  animation-name: anim-3;
}

.header-section.playing .fourth {
  animation-name: anim-4;
}

@keyframes anim-1 {
  0%,
  8% {
    opacity: 0;
    top: 54%;
  }
  8%,
  16% {
    bottom: 25%;
    top: 54%;
    opacity: 1;
  }
  25%,
  100% {
    bottom: 50%;
    top: 25%;
    opacity: 0;
  }
}

@keyframes anim-2 {
  0%,
  25% {
    opacity: 0;
  }
  32%,
  40% {
    bottom: 25%;
    opacity: 1;
  }
  50%,
  100% {
    bottom: 50%;
    opacity: 0;
  }
}

@keyframes anim-3 {
  0%,
  50% {
    opacity: 0;
  }
  58%,
  66% {
    bottom: 25%;
    opacity: 1;
  }
  75%,
  100% {
    bottom: 50%;
    opacity: 0;
  }
}

@keyframes anim-4 {
  0%,
  75% {
    opacity: 0;
  }
  81%,
  92% {
    bottom: 25%;
    opacity: 1;
  }
  100% {
    bottom: 50%;
    opacity: 0;
  }
}

<div class="wrapper">
  <video autoplay muted loop id="myVideo" height="800px;">
      <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
  </video>
  <div class="landing-header">
    <div class="header-section">
      <section>
        <h2 class="as-main-heading">Story of a bunny</h2>
        <div class="as-main-excerpt first">
          <p>Here comes a butterfly</p>
        </div>
        <div class="as-main-excerpt second">
          <p>Bunny See's the butterfly</p>
        </div>
        <div class="as-main-excerpt third">
          <p>Butterfly Sitting on the flower</p>
        </div>
        <div class="as-main-excerpt fourth">
          <p>An apple falls on the butterfly</p>
        </div>
      </section>

    </div>
  </div>
</div>

关于改变一切的评论（即你需要有暂停和播放功能），那么最好的可能是完全摆脱 CSS 动画，并从 js 中控制你的元素（通过 CSS 过渡） ：

var header = document.querySelector('.header-section');
var chapters = [0, 0.96, 1.92, 2.9, 4.2, 5.4, 6.5, 7.2, 9, 11];
var classes = ['', 'first-in', 'first-out', 'second-in', 'second-out', 'third-in', 'third-out', 'fourth-in', 'fourth-out', ''];

var currentFrame = 0;
myVideo.ontimeupdate = function() {
  var nextFrame = (currentFrame + 1) % chapters.length;
  if(myVideo.currentTime >= chapters[nextFrame] || myVideo.currentTime < chapters[currentFrame]) {
//    if(classes[currentFrame]) header.classList.remove(classes[currentFrame]);
    if(classes[nextFrame]) header.classList.add(classes[nextFrame]);
    currentFrame = nextFrame;
    if(!nextFrame) // did loop
      classes.forEach(remove);
    header.offsetTop;
  }

};
function remove(classname) {
  if(classname)header.classList.remove(classname);
}

onclick = function(e) {
  if(myVideo.paused) myVideo.play();
  else myVideo.pause();
}

body {
  background-color: #02001b;
}

.wrapper {
  position: relative;
  width: 1455px;
  height: 799px;
  margin: 0 auto;
}

.header-section section {
  width: 45%;
  height: 200px;
  margin: 0 auto;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  overflow: hidden;
}

.as-main-heading {
  color: #fff;
  text-transform: uppercase;
  font-size: 36px;
  font-weight: 300;
}

.as-main-excerpt {
  color: #fff;
  font-size: 18px;
}

.header-section .as-main-excerpt {
    position: absolute;
    left: 0;
    right: 0;
    opacity: 0;
    top: 54%;
    transition-property: opacity bottom top;
    transition-duration: 1s;
    transition-timing-function: ease-in-out;
    
}

.header-section.first-in .first,
  .header-section.second-in .second,
  .header-section.third-in .third,
  .header-section.fourth-in .fourth {
    bottom: 25%;
    top: 54%;
    opacity: 1;
}
.header-section.first-out .first,
  .header-section.second-out .second,
  .header-section.third-out .third,
  .header-section.fourth-out .fourth {
    bottom: 50%;
    top: 25%;
    opacity: 0;
}
video {
  pointer-events: none;
}

<div class="wrapper">
  <video autoplay muted loop id="myVideo" height="800px;">
      <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
  </video>
  <div class="landing-header">
    <div class="header-section playing">
      <section>
        <h2 class="as-main-heading">Story of a bunny</h2>
        <div class="as-main-excerpt first">
          <p>Here comes a butterfly</p>
        </div>
        <div class="as-main-excerpt second">
          <p>Bunny See's the butterfly</p>
        </div>
        <div class="as-main-excerpt third">
          <p>Butterfly Sitting on the flower</p>
        </div>
        <div class="as-main-excerpt fourth">
          <p>An apple falls on the butterfly</p>
        </div>
      </section>

    </div>
  </div>
</div>

Answer 2

您可以使用 animation-delay 延迟您的文本动画

.header-section .first,
.header-section .second,
.header-section .third,
.header-section .fourth {
  position: absolute;
  left: 0;
  right: 0;
  animation-duration: 12s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-delay: 1s;
}