waypoint.js、animate.cssやjqueryを用いてフェードインをさせたときブラウザの大きさを変化させたくない。

waypoint.js、animate.cssを使いフェードインを試してみたのですが、ブラウザで実行したときブラウザ下部に一時的にバーが出現しフェードイン後に元に戻るといった挙動をしていました。
このような挙動をなくす方法がありましたら教えていただきたいです。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <title>スクロールアニメーション</title>
7  <link rel="stylesheet" href="./animate.css">
8<style>
9.animate-box{
10    opacity: 0;
11}
12</style>
13  <!-- /style -->
14</head>
15<body>
16  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
17  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
18  <p class="animate-box" data-animate-effect="fadeInRight">  スクロールに反応</p><br>
19  <p class="animate-box" data-animate-effect="fadeInUp">  スクロールに反応</p><br>
20  <p class="animate-box" data-animate-effect="fadeInRight">  スクロールに反応</p><br>
21  <p class="animate-box" data-animate-effect="fadeInUp">  スクロールに反応</p><br>
22  <p class="animate-box" data-animate-effect="fadeInRight">  スクロールに反応</p><br>
23<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
24  <script src="./jquery-3.4.1.min.js"></script>
25  <script src="./jquery.easing.min.js"></script>
26  <script src="./jquery.waypoints.min.js"></script>
27  <script>
28$('.animate-box').waypoint(function(direction) {
29  if(direction === 'down' && !$(this.element).hasClass('animated')) {
30    $(this.element).addClass('item-animate');
31    setTimeout(function(){
32      $('body .animate-box.item-animate').each(function(index){
33        var el = $(this);
34
35        setTimeout(function () {
36          var effect = el.data('animate-effect'); 
37          if (effect === 'fadeIn') {
38            el.addClass('fadeIn animated');
39          } else if (effect === 'fadeInLeft') {
40            el.addClass('fadeInLeft animated');
41          } else if (effect === 'fadeInRight') {
42            el.addClass('fadeInRight animated');
43          } else {
44            el.addClass('fadeInUp animated');
45          }
46
47          el.removeClass('item-animate'); 
48        }, index * 200, 'easeInOutExpo' );
49      });
50    }, 100);
51  }
52}, {
53  offset: '50%'
54});
55  </script>
56</body>
57</html>

animate.css
1.animate-box {
2  opacity: 0;
3}
4 
5.animated {
6  -webkit-animation-duration: 1s;
7  animation-duration: 1s;
8  -webkit-animation-fill-mode: both;
9  animation-fill-mode: both;
10}
11 
12@keyframes fadeIn {
13  from {
14    opacity: 0;
15  }
16 
17  to {
18    opacity: 1;
19  }
20}
21 
22.fadeIn {
23  -webkit-animation-name: fadeIn;
24  animation-name: fadeIn;
25}
26@keyframes fadeInRight {
27  from {
28    opacity: 0;
29    /*-webkit-transform: translate3d(100%, 0, 0);
30    transform: translate3d(100%, 0, 0);*/
31    -webkit-transform: translate3d(50px, 0, 0);
32    transform: translate3d(50px, 0, 0);
33  }
34 
35  to {
36    opacity: 1;
37    -webkit-transform: none;
38    transform: none;
39  }
40}
41 
42.fadeInRight {
43  -webkit-animation-name: fadeInRight;
44  animation-name: fadeInRight;
45}