Question

我目前有5帧 - 每帧包含总共3个动画，按时间逐渐淡化下一帧。

我的问题：如何在完成最后一个动画序列后循环播放动画？（在示例中为＃frame2）

我不介意使用javascript来检测和强迫＆＃34;循环。

小提琴：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;}
}

Answer 1

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

animationend

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

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

我相信你会明白这个想法。

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>

CSS3在最后一帧动画之后循环按照动画的顺序进行

1 个答案: