jQueryとCSSアニメーション - バグアニメーション

Question

を繰り返すのsetTimeoutを呼び出すときに、私はここで見ることができ、アニメーション、持っている：https://rimildeyjsr.github.io/st.anthony/#administration_page

校長と副校長のメッセージフェード中にして、代わりと終了時にフェードアウト、私が呼びますsetTimeoutは、16秒ごとにアニメーションをループします。

アニメーションは、初めて呼び出すときに問題なく動作します。 2回目は、プリンシパルのメッセージだけがフェードインし、画面には約8秒間何も表示されません。この後、アニメーションは別の通常の反復を持ち、バグが再び発生します。私は開発ツールを使ってデバッグしようとしましたが、画面が空白になるたびにクラスが適用されていないことがわかりました。それ以外はエラーはありません。

ご協力いただきましてありがとうございます。

HTML：

<div class="group"> 
     <div class="left"> 
      <img src="images/the_principal.jpg" alt="school principal" class="admin-pic"> 
      <img src="images/mrs_cooke_optimised.png" alt="school vice principal" class="admin-pic"> 
     </div> 
     <div class="right"> 
      <p class="text" id="principal"> 
       "Education is a simple yet a serious process. It is a process of making a human being into 'being human'. 
       Stress at our institution is on this aspect.<br>I invite you to join us and make our country proud." 
       <br><br>-The Principal 
      </p> 
      <p class="text" id="vice-principal"> 
       "We are all Indians firstly and lastly.Whatever anyone else might say, we need to uphold this God-given identity 
       through our actions, thoughts and what we might say.<br> 
       Long live the Indian Republic." 
       <br><br> -The Vice Principal 
      </p> 
     </div> 

CSS：

.left { 
    float: left; 
    width: 30%; 
} 

.right { 
    float: right; 
    width: 70%; 
} 

.group:after { 
    content:""; 
    display: table; 
    clear: both; 
} 

.admin-pic { 
    display: block; 

    -webkit-border-radius: 50%; 
    -moz-border-radius: 50%; 
    -o-border-radius: 50%; 
    -ms-border-radius: 50%; 
    border-radius: 50%; 
    margin: 0; 
    z-index: 10; 
    width: 350px; 
    height: auto; 
    position: absolute; 
    top: 20%; 
    left: 25%; 
    max-width: 100%; 
    opacity:0; 
} 

.text { 
    position: absolute; 
    z-index: 10; 
    margin:0; 
    top :20%; 
    left : 50%; 
    color: white; 
    text-align: justify; 
    width: 40%; 
    font-family: 'Cormorant Garamond',serif; 
    font-weight:300; 
    font-style: italic; 
    text-align-last: center; 
    opacity: 0; 

} 

.fadeInDownExit{ 
    -webkit-animation: fadeInDownExit 8s linear backwards; 
    -o-animation: fadeInDownExit 8s linear backwards; 
    animation: fadeInDownExit 8s linear backwards; 
} 

@keyframes fadeInDownExit { 
    0%, 100% { 
     opacity: 0; 
     -webkit-transform: translateY(0px); 
     -moz-transform: translateY(0px); 
     -ms-transform: translateY(0px); 
     -o-transform: translateY(0px); 
     transform: translateY(0px); 
    } 

    10%, 90% { 
     opacity: 1; 
     -webkit-transform: translateY(40%); 
     -moz-transform: translateY(40%); 
     -ms-transform: translateY(40%); 
     -o-transform: translateY(40%); 
     transform: translateY(40%); 
    } 

} 
.fadeInUpExit{ 
    -webkit-animation: fadeInUpExit 8s linear backwards; 
    -o-animation: fadeInUpExit 8s linear backwards; 
    animation: fadeInUpExit 8s linear backwards; 
} 

@keyframes fadeInUpExit { 
    0%, 100% { 
     opacity: 0; 
     -webkit-transform: translateY(100%); 
     -moz-transform: translateY(100%); 
     -ms-transform: translateY(100%); 
     -o-transform: translateY(100%); 
     transform: translateY(100%); 
    } 

    10%, 90% { 
     opacity: 1; 
     -webkit-transform: translateY(0px); 
     -moz-transform: translateY(0px); 
     -ms-transform: translateY(0px); 
     -o-transform: translateY(0px); 
     transform: translateY(0px); 
    } 

} 

のjQuery：

function display(){ 
       $('.text').each(function() { 
        var delay = $(this).index(); 
        $(this).css('animation-delay', delay*8 + 's'); 
        $(this).addClass('fadeInUpExit').one(animationEnd, function(){ 
         $(this).removeClass('fadeInUpExit'); 
         $(this).css('animation-delay',0+'s'); 
        }); 

       }); 

       $('.admin-pic').each(function() { 
        var delay = $(this).index(); 
        $(this).css('animation-delay', delay*8 + 's'); 
        $(this).addClass('fadeInDownExit').one(animationEnd, function(){ 
         $(this).removeClass('fadeInDownExit'); 
         $(this).css('animation-delay',0+'s'); 
        }); 

       }); 
       setTimeout(display,16000); 

      } 
var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend'; 

display(); 

Answer 1

私はあなたが01で早すぎるdisplay()繰り返しを呼び出すことを言うだろうが表示され、このため、ディスプレイを再起動してこのバグが発生すると、アニメーションは終了します。

例として、タイムアウトを長く設定すると、問題は発生しません。

が正常に機能し、それを表示するには、このようにコードを変更してみてください：この変化として

setTimeout(display,16100); 

UPDATE

問題を指摘し、私は解決策として、それを使用するrecommandません。 アニメーションが終了した後にコードが繰り返されることを確認する唯一の方法であるため、アニメーションイベントのみを使用することをお勧めします。あなたのコードの最初の部分で

実施例は次のようになります。イベント名で

var $txt = $('.text'); 
var incr = 0; 

function display() { 
    var $this = $txt.eq(incr); 
    $this.one('animationend', function() { 
    incr = incr ? 0 : 1; 
    $this.removeClass('fadeInUpExit'); 
     display(); 
    }); 
    $this.addClass('fadeInUpExit'); 
} 

display();