我正在制作一个着陆视频部分，该部分有一个视频在背景中播放，根据视频，根据视频的时间，一些文本会随着视频的变化而变化。文本动画使用关键帧。我已经开始工作了，但我被卡在了一个点上，即循环时的延迟。
在窗口加载(视频开始(时，一切都很好，但当视频结束并开始返回循环时，视频在循环后重新启动大约有1秒或几秒的延迟。"这是我的实际问题"，当视频重新启动时，文本更改会导致关键帧延迟，并且迭代次数设置为无限。文本第二次与视频不匹配。当我停留在那个部分时，视频与文本幻灯片不匹配。
有没有什么方法可以用CSS或jQuery延迟动画，当视频第二次开始循环时，文本会延迟。
这是代码笔链接
下面是我正在处理的代码。
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>每次视频开始新循环时，只要重新启动整个动画，就可以实现这一点。
要检测此事件，可以侦听媒体事件onplaying
要重新启动动画，您可以在父元素上设置一个类(例如.playing(，该类将告知动画何时应处于活动状态，然后删除该类并强制回流，以便浏览器停用动画，最后设置播放类。
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>您可以使用动画延迟延迟文本动画
.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;
}