javascript - 滚动到元素时执行 FadeInUp 动画(javascript)

Question

我有一个画廊。我需要那个画廊中的图片使用 CSS 动画或 javascript fadeinup 动画进行动画处理。我需要为此类 animation-element 或 grid 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 或 < strong>网格里:

@-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/