animate.css -div исчезает после анимации

Question

Я использую waypoint.js и animate.css, чтобы оживить мой div, и он работает, но для некоторых анимаций, таких как flipInX и zoomIn, div выполняет анимацию и исчезает. Но для некоторых других случаев, таких как fadeIn,bounceIn, этого не происходит и div показывается после эффекта fadeIn или bounceIn. Нужно ли использовать дополнительные классы для определенных анимаций (например, как они используют infintie, delay, speed в animate.css.i прошли через документацию, но не смогли найти какой-либо класс для вышеуказанного сценария)

Мой код:

<script>
        $(document).ready(function () {

            // hide our element on page load
            $('#Site02').css('opacity', 0);
            $('#Site01').css('opacity', 0);
            $('#Site03').css('opacity', 0);

            $('#Site02').waypoint(function () {
                $('#Site02').addClass('zoomIn');
            }, { offset: '210%' });

            $('#Site01').waypoint(function () {
                $('#Site01').addClass('zoomIn');
            }, { offset: '210%' });

            $('#Site03').waypoint(function () {
                $('#Site03').addClass('zoomIn');
            }, { offset: '210%' });

        });
    </script>

<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 animated fadeInUp">
                <div id="Site01" class="animated">Content</div>
                <div id="Site02" class="animated">Content</div>
                <div id="Site03" class="animated">Content</div>
  </div>
                           

Может ли кто-нибудь направить меня, где я иду не так