滚动到元素时执行FadeInUp动画（javascript）

Question

我有一个画廊。 我需要该画廊中的图片以CSS动画或javascript fadeinup动画进行动画处理。 我需要为此类动画元素或网格li设置动画 （不添加类）

    <section class="portfolio">
<div class="container">
<h1> Portfolio </h1>
        <hr>
        <p> Pogledajte moj portfolio. </p>

        <!-- Logo Portfolio -->
        <ul class="grid gallery">
            <li class="animation-element">
                <figure>
                    <img src="img/Logo-1.png" alt="GINIS">
                    <figcaption>
                        <h3>GINIS</h3>
                        <span>Logo</span>
                    </figcaption>
                </figure>
            </li>
            <li class="animation-element">
                <figure>
                    <img src="img/Logo-2.png" alt="img01">
                    <figcaption>
                        <h3>Name</h3>
                        <span>Logo</span>
                    </figcaption>
                </figure>
            </li>
            <li class="animation-element">
                <figure>
                    <img src="img/Logo-3.png" alt="img01">
                    <figcaption>
                        <h3>Name</h3>
                        <span>Logo</span>
                    </figcaption>
                </figure>
            </li>
            <li class="animation-element">
                <figure>
                    <img src="img/Logo-4.png" alt="img01">
                    <figcaption>
                        <h3>Name</h3>
                        <span>Logo</span>
                    </figcaption>
                </figure>
            </li>


        </div>
</section>

这是我的代码示例： http : //codepen.io/anon/pen/GqogdM

或者，如果不可能，我想简单地添加类.fadeinup ，然后，当用户滚动到该位置时，将此类添加到animation-elemnt或grid li ：

@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}

Answer 1

我想您正在寻找以下动画，对吧？ 您可以根据需要使用以下库。

http://michalsnik.github.io/aos/