如何让CSS动画DIV开始隐藏并逐个显示？

Question

目标是一旦用户滚动并且红色框进入视图，就会触发CSS动画。它工作得很好，除了我期待所有的盒子开始完全隐藏然后第一个盒子淡入，然后第二个盒子淡入，然后第三个等等。但它们都开始可见，然后在褪色之前快速消失英寸

如何让所有4个盒子开始不可见，然后只有在各自的fadein动画开始后才会出现？

＆＃13;

＆＃13;

.space {
  height: 800px;
}

.column {
  height: 100px;
  width: 100px;
  background: red;
  margin-bottom: 5px;
}

.fadeinfast.triggeredCSS3 {
  -webkit-animation: fadein 1s;
  /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: fadein 1s;
  /* Firefox < 16 */
  -ms-animation: fadein 1s;
  /* Internet Explorer */
  -o-animation: fadein 1s;
  /* Opera < 12.1 */
  animation: fadein 1s;
}

.fadeinfast.fadein1.triggeredCSS3 {
  animation-delay: 0s;
}

.fadeinfast.fadein2.triggeredCSS3 {
  animation-delay: 1s;
}

.fadeinfast.fadein3.triggeredCSS3 {
  animation-delay: 2s;
}

.fadeinfast.fadein4.triggeredCSS3 {
  animation-delay: 3s;
}

@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}


/* Firefox < 16 */

@-moz-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}


/* Safari, Chrome and Opera > 12.1 */

@-webkit-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}


/* Internet Explorer */

@-ms-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}


/* Opera < 12.1 */

@-o-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="space">
</div>
<div class="column fadeinfast fadein1 animateinview">

</div>
<div class="column fadeinfast fadein2 animateinview">

</div>
<div class="column fadeinfast fadein3 animateinview">

</div>
<div class="column fadeinfast fadein4 animateinview">

</div>

＆＃13;

{{1}}

＆＃13;

＆＃13;

＆＃13;

Answer 1

您想要添加animation-fill-mode: forwards;并将初始不透明度设置为0.我更新了小提琴以反映更改：https://jsfiddle.net/d27fwe5c/6/

它的作用是停止最后一帧的动画。您可以在此处详细了解：https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode

;
(function($, win) {
  $.fn.inViewport = function(cb) {
    return this.each(function(i, el) {
      function visPx() {
        var H = $(this).height(),
          r = el.getBoundingClientRect(),
          t = r.top,
          b = r.bottom;
        return cb.call(el, Math.max(0, t > 0 ? H - t : (b < H ? b : H)));
      }
      visPx();
      $(win).on("resize scroll", visPx);
    });
  };
}(jQuery, window));


$(function() { // DOM is now ready
  $(".animateinview").inViewport(function(px) {
    if (px) $(this).addClass("triggeredCSS3");
  });
});

.space {
  height: 800px;
}

.column {
  height: 100px;
  width: 100px;
  background: red;
  margin-bottom: 5px;
  opacity: 0;
}

.fadeinfast.triggeredCSS3 {
  -webkit-animation: fadein 1s;
  /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: fadein 1s;
  /* Firefox < 16 */
  -ms-animation: fadein 1s;
  /* Internet Explorer */
  -o-animation: fadein 1s;
  /* Opera < 12.1 */
  animation: fadein 1s;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -ms-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.fadeinfast.fadein1.triggeredCSS3 {
  animation-delay: 0s;
}

.fadeinfast.fadein2.triggeredCSS3 {
  animation-delay: 1s;
}

.fadeinfast.fadein3.triggeredCSS3 {
  animation-delay: 2s;
}

.fadeinfast.fadein4.triggeredCSS3 {
  animation-delay: 3s;
}

@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}


/* Firefox < 16 */

@-moz-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}


/* Safari, Chrome and Opera > 12.1 */

@-webkit-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}


/* Internet Explorer */

@-ms-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}


/* Opera < 12.1 */

@-o-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="space">
</div>
<div class="column fadeinfast fadein1 animateinview">

</div>
<div class="column fadeinfast fadein2 animateinview">

</div>
<div class="column fadeinfast fadein3 animateinview">

</div>
<div class="column fadeinfast fadein4 animateinview">

</div>