CSS3最后一帧动画之后的循环在动画序列中完成

CSS3 Looping after last frame animation is done in sequence of animations

本文关键字：动画 循环 之后 最后 一帧 CSS3      更新时间：2023-09-26

我目前有5帧-每帧由3个动画组成，随着时间的推移逐渐淡出下一帧。

我的问题是:我如何在完成最后一个动画序列后循环动画?(在本例中为#frame2)

我不介意使用javascript来检测和"强制"循环。

Fiddle here: http://jsfiddle.net/a0cpo5xe/1/-我的设置看起来是这样的(只是想象它有5帧):

#frame1 {
    animation:kf_frame_fade_up 0.4s;
    animation-fill-mode: forwards;
    animation-delay:0.8s;
}
#picture-1 .blink {
    animation:kf_frame_fade_down 0.2s;
    animation-fill-mode: forwards;
    animation-delay:0.5s;
}
#picture-1 .picture {
    animation:kf_frame_fade_up 0.2s;
    animation-fill-mode: forwards;
    animation-delay:0.5s;
}
#frame2 {
    animation:kf_frame_fade_up 0.4s;
    animation-fill-mode: forwards;
    animation-delay:4.3s;
}
#picture-2 .blink {
    animation:kf_frame_fade_down 0.2s;
    animation-fill-mode: forwards;
    animation-delay:4s;
}
#picture-2 .picture {
    animation:kf_frame_fade_up 0.2s;
    animation-fill-mode: forwards;
    animation-delay:4s;
}
/* FADES */
@keyframes kf_frame_fade_up {
    0% {opacity: 0;}
    100% {opacity: 1;}
}
@keyframes kf_frame_fade_down {
    0% {opacity: 1;}
    100% {opacity: 0;}
}

您可以使用JavaScript侦听animationend事件以确定动画是否结束。

animationend

当CSS动画完成时触发animationend事件。

下面是一个例子，通过克隆你的元素，删除它们，并在动画结束时将它们添加回DOM，从jsfiddle重复你的css动画三次。

我相信你会明白的。

var i = 1;
function whichAnimationEvent(){
  var t,
      el = document.createElement("fakeelement"),
      animations = {
        "animation"      : "animationend",
        "WebkitAnimation": "webkitAnimationEnd"
      };
  for (t in animations){
    if (el.style[t] !== undefined){
      return animations[t];
    }
  }
}
function init() {
  var animationEvent = whichAnimationEvent(),
      wrp = document.getElementById('wrapper'),
      frm2 = document.getElementById('frame2'),
      cln = wrp.cloneNode(true);
  function animationEnd(evt) {
    i++;
    //console.log(evt);
    wrp.parentNode.removeChild(wrp);
    document.body.appendChild(cln);
    if (i !== 3) {
      init();
    }
  }
  frm2.addEventListener(animationEvent, animationEnd);
}
init();
#wrapper {
  text-align: center;
  color: #ffffff;
}
#frames {
  position: absolute;
  left: 0;
  top: 0;
  width: 200px;
  height: 200px;
  border: 1px solid #000000;
}
.frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0; /* hide */
}
#pictures {
  position: absolute;
  top: 0;
}
.picture {
  position: absolute;
  top: 100px;
  left: 100px;
  padding: 10px;
  opacity: 0; /* hide */
}
/* ANIMATION START */
#frame1 {
  background-color: green;
  -webkit-animation:kf_frame_fade_up 0.4s;
  animation:kf_frame_fade_up 0.4s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-delay:0.8s;
  animation-delay:0.8s;
}
#picture-1 .picture {
  background-color: #116343;
  -webkit-animation:kf_frame_fade_up 0.2s;
  animation:kf_frame_fade_up 0.2s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-delay:0.5s;
  animation-delay:0.5s;
}
#frame2 {
  background-color: blue;
  -webkit-animation:kf_frame_fade_up 0.4s;
  animation:kf_frame_fade_up 0.4s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-delay:4s;
  animation-delay:4s;
}
#picture-2 .picture {
  background-color: #3d1163;
  -webkit-animation:kf_frame_fade_up 0.2s;
  animation:kf_frame_fade_up 0.2s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-delay:3.7s;
  animation-delay:3.7s;
}
/* FADES */
@-webkit-keyframes kf_frame_fade_up {
  0% {opacity: 0;}
  100% {opacity: 1;}
}
@keyframes kf_frame_fade_up {
  0% {opacity: 0;}
  100% {opacity: 1;}
}
@-webkit-keyframes kf_frame_fade_down {
  0% {opacity: 1;}
  100% {opacity: 0;}
}
@keyframes kf_frame_fade_down {
  0% {opacity: 1;}
  100% {opacity: 0;}
}
<div id="wrapper">
  <div id="frames">
    <div id="frame1" class="frame">frame 1</div>
    <div id="frame2" class="frame">frame 2</div>
  </div>
  <div id="pictures">
    <div id="picture-1">
      <div class="picture">pic 1</div>
    </div>
    <div id="picture-2">
      <div class="picture">pic 2</div>
    </div>
  </div>
</div>

相关文章：