チェック アニメイトWOW

なぜかモバイル環境では　遅れ　回数をしていすると動かなくなる

挿入箇所

<h2 class="d_con_title2 wow animate__animated animate__bounce" style="animation-delay:0.5s">　0.5秒後
<i class=""></i>BLOG</h2> 　

<div class="tsuzuki_box2"> 

<a href="/ブログトップ/" class="btn_d wow animate__animated animate__fadeInUp" >
BLOG TOP <i class=" icon-right-open"></i>

</a> </div>

    <div class="wow animate__animated animate__fadeInUp"></div>
    <div class="wow animate__animated animate__pulse"></div>

     <p class="d_title4 wow animate__animated animate__pulse" data-wow-offset ="100">  100px後

ヘッダー

 <link
    rel="stylesheet"
    href="<?php echo get_template_directory_uri(); ?>/0_d/js/animate.min.css"/>
<script src="<?php echo get_template_directory_uri(); ?>/0_d/js/wow.min.js"></script>
<script>
  new WOW(
      
  //{mobile: false}
      
  ).init();
    
    
   
</script>

他のやり方

html

ボックス全体  
<div class="flex_box effect-fade" style="padding-top:24px;">
~~
</div>
ボックス1個
<div class="f_box2f effect-fade">
~~
</div>

-----------------
順番にずらしては
大枠
<div class ="fade_up_con">
ボックス1個
<div class="f_box2f effect-fade_jyun">
~~
</div>

ボックス1個
<div class="f_box2f effect-fade_jyun">
~~
</div>

ボックス1個
<div class="f_box2f effect-fade_jyun">
~~
</div>


</div>

ヘッダーではなく、フッターに　フリックスライダーのロードボタンがおかしくなる　window.onload = function()のせいだと思う。

 <script>
//フェイドアップ
    window.onload = function() {
  scroll_effect();

  $(window).scroll(function(){
   scroll_effect();
  });

  function scroll_effect(){
      //1個effect-fadeを
   $('.effect-fade').each(function(){
    var elemPos = $(this).offset().top;
    var scroll = $(window).scrollTop();
    var windowHeight = $(window).height();
       
if (navigator.userAgent.indexOf('iPhone') > 0 || navigator.userAgent.indexOf('Android') > 0 && navigator.userAgent.indexOf('Mobile') > 0) {
        if (scroll > elemPos - windowHeight + 0){
     $(this).addClass('effect-scroll');
    }
        // スマートフォン向けの記述
} else if (navigator.userAgent.indexOf('iPad') > 0 || navigator.userAgent.indexOf('Android') > 0) {
        // タブレット向けの記述
        if (scroll > elemPos - windowHeight + 50){
     $(this).addClass('effect-scroll');
    }
} else {
        // PC向けの記述
        if (scroll > elemPos - windowHeight + 50){
     $(this).addClass('effect-scroll');
    }
}


   } );
     //大枠の子effect-fade_jyunを順番にずらして                    
 $('.fade_up_con').each(function(){
    var elemPos = $(this).offset().top;
    var scroll = $(window).scrollTop();
    var windowHeight = $(window).height();
       

        // PC向けの記述
        if (scroll > elemPos - windowHeight + 0){
     $(this).addClass('effect-scroll');
    }
   }                   
                         );
      
  }
};
    </script>

css less

//フェードイン　スマホはやらないという指定で囲む
@media screen and (min-width: 737px){

.effect-fade {
　opacity : 0;
　transform : translate(0, 45px);
　transition : all 500ms;

}

.effect-fade.effect-scroll {
　opacity : 1;
　transform : translate(0, 0);
}

}//@media screen 736px

もしくは

///////////////////////////////////////////////////////////////

///フェードアップ
.effect-fade {
　opacity : 0;
　transform : translate(0, 45px);
　transition : all 500ms;

}

.effect-fade.effect-scroll {
　opacity : 1;
　transform : translate(0, 0);
}


//フェードアップ大枠内 .effect-fade_jyunは順番にずれて表示されてく　.fade_up_conにきたら、内容は全放出

.fade_up_con{
    .effect-fade_jyun{
opacity : 0;
　transform : translate(0, 45px);
　transition : all 500ms;
    }
}
    
.fade_up_con.effect-scroll{
     .effect-fade_jyun{
         　opacity : 1;
　transform : translate(0, 0);
    }
    
    //ずれを一個ずつ手書き
    .effect-fade_jyun:nth-of-type(2) {
    transition-delay:200ms;
    }
    
        .effect-fade_jyun:nth-of-type(3) {
    transition-delay:400ms;
    }
            .effect-fade_jyun:nth-of-type(4) {
    transition-delay:600ms;
    }
            .effect-fade_jyun:nth-of-type(5) {
    transition-delay:800ms;
    }
            .effect-fade_jyun:nth-of-type(6) {
    transition-delay:1000ms;
    }
            .effect-fade_jyun:nth-of-type(7) {
    transition-delay:1200ms;
    }
                .effect-fade_jyun:nth-of-type(8) {
    transition-delay:1400ms;
    }
                .effect-fade_jyun:nth-of-type(9) {
    transition-delay:1600ms;
    }
                .effect-fade_jyun:nth-of-type(10) {
    transition-delay:1800ms;
    }
                .effect-fade_jyun:nth-of-type(11) {
    transition-delay:2000ms;
    }
                .effect-fade_jyun:nth-of-type(12) {
    transition-delay:2200ms;
    }
    
                .effect-fade_jyun:nth-of-type(13) {
    transition-delay:2400ms;
    }
                .effect-fade_jyun:nth-of-type(14) {
    transition-delay:2600ms;
    }
                .effect-fade_jyun:nth-of-type(14) {
    transition-delay:2800ms;
    }
                .effect-fade_jyun:nth-of-type(15) {
    transition-delay:3000ms;
    }
                .effect-fade_jyun:nth-of-type(16) {
    transition-delay:3200ms;
    }
                .effect-fade_jyun:nth-of-type(17) {
    transition-delay:3400ms;
    }
                .effect-fade_jyun:nth-of-type(18) {
    transition-delay:3600ms;
    }
                .effect-fade_jyun:nth-of-type(19) {
    transition-delay:3800ms;
    }
                .effect-fade_jyun:nth-of-type(20) {
    transition-delay:4000ms;
    }
                .effect-fade_jyun:nth-of-type(21) {
    transition-delay:4200ms;
    }
                .effect-fade_jyun:nth-of-type(22) {
    transition-delay:4400ms;
    }
                .effect-fade_jyun:nth-of-type(23) {
    transition-delay:4600ms;
    }
                    .effect-fade_jyun:nth-of-type(24) {
    transition-delay:4800ms;
    }
    
    
}

キラキラスタイル　光　動き

ワセダのタイトル背景赤で全体キラ

.kira{    position    :relative;
    overflow    :hidden;
    
    img{ width: 100%; margin-bottom: 1%;
        
    @media screen and (max-width: 736px){
        margin-bottom: 1%;
    margin-top: 0%;
        
        }//@media screen 736px
    }

}

.reflection {
    height      :100%;
    width       :30px;
    position    :absolute;
    top         :-180px;
    left        :0;
    background-color: #fff;
    opacity     :0;
    transform: rotate(45deg);
 //一度だけにしたい場合はinfiniteを消す 回数指定は2など
    animation: reflection 3s ease-in-out infinite;
    -webkit-transform: rotate(45deg);
    -webkit-animation: reflection 3s ease-in-out infinite;
    -moz-transform: rotate(45deg);
    -moz-animation: reflection 3s ease-in-out infinite;
    -ms-transform: rotate(45deg);
    -ms-animation: reflection 3s ease-in-out infinite;
    -o-transform: rotate(45deg);
    -o-animation: reflection 3s ease-in-out infinite;
}
 
@keyframes reflection {
    0% { transform: scale(0) rotate(45deg); opacity: 0; }
    80% { transform: scale(0) rotate(45deg); opacity: 0.5; }
    81% { transform: scale(4) rotate(45deg); opacity: 1; }
    100% { transform: scale(100) rotate(45deg); opacity: 0; }
}
@-webkit-keyframes reflection {
    0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
    80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
    81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
    100% { -webkit-transform: scale(100) rotate(45deg); opacity: 0; }
}
@-moz-keyframes reflection {
    0% { -moz-transform: scale(0) rotate(45deg); opacity: 0; }
    80% { -moz-transform: scale(0) rotate(45deg); opacity: 0.5; }
    81% { -moz-transform: scale(4) rotate(45deg); opacity: 1; }
    100% { -moz-transform: scale(100) rotate(45deg); opacity: 0; }
}
@-ms-keyframes reflection {
    0% { -ms-transform: scale(0) rotate(45deg); opacity: 0; }
    80% { -ms-transform: scale(0) rotate(45deg); opacity: 0.5; }
    81% { -ms-transform: scale(4) rotate(45deg); opacity: 1; }
    100% { -ms-transform: scale(50) rotate(45deg); opacity: 0; }
}
@-o-keyframes reflection {
    0% { -o-transform: scale(0) rotate(45deg); opacity: 0; }
    80% { -o-transform: scale(0) rotate(45deg); opacity: 0.5; }
    81% { -o-transform: scale(4) rotate(45deg); opacity: 1; }
    100% { -o-transform: scale(100) rotate(45deg); opacity: 0; }
}

<div class="d_title_width kira"  >

    
    <img src="<?php echo get_template_directory_uri(); ?>/1_img/9_client/3_waseda/aj3.svg" style=""
     >
    
    <div class="reflection"></div>
    
</div>