jQueryとCSSアニメーションの遅延を避ける

Question

jQueryとCSSアニメーションでスライダを作った。問題は、アニメーションが実行されるまでに数秒かかることです。遅延を避けるために、私はすべてのjQuery関数でタイムアウトを使用しました。どのようにしてスライダをより高速にロードすることができますか？ここで

はフィドルです：https://jsfiddle.net/WalentinW/3nL8ndps/1/

とhtmlコード：

<div class="center"> 
      <div id="img-g-1"> 
       <div id="img-1-t" class="img-h-t"> 
       </div> 
       <div id="img-2-t" class="img-h-t"> 
       </div> 
      </div> 

      <div id="img-g-2"> 
       <div id="img-3-t" class="img-h-t"> 
       </div> 
       <div id="img-4-t" class="img-h-t"> 
       </div> 
      </div>  
     </div> 

のjQuery：

$(document).ready(function(){ 
    //slider 
     function slide1() { 
     if($("#img-1-t").hasClass("img-1-s3")) { 
      $("#img-1-t").removeClass("img-1-s3"); 
      $("#img-2-t").removeClass("img-2-s3"); 
      $("#img-3-t").removeClass("img-3-s3"); 
      $("#img-4-t").removeClass("img-4-s3"); 
      $(".img-h-t").removeClass("s3"); 
     } 

     }; 

     function slide2() { 
      $("#img-1-t").addClass("img-1-s2"); 
      $("#img-2-t").addClass("img-2-s2"); 
      $("#img-3-t").addClass("img-3-s2"); 
      $("#img-4-t").addClass("img-4-s2"); 
      $(".center").addClass("s2"); 
      $(".img-h-t").addClass("s2");  
     }; 

     function slide3() { 
      $("#img-1-t").removeClass("img-1-s2").addClass("img-1-s3"); 
      $("#img-2-t").removeClass("img-2-s2").addClass("img-2-s3"); 
      $("#img-3-t").removeClass("img-3-s2").addClass("img-3-s3"); 
      $("#img-4-t").removeClass("img-4-s2").addClass("img-4-s3"); 
      $(".center").removeClass("s2"); 
      $(".img-h-t").removeClass("s2").addClass("s3"); 

      setTimeout(function(){ 
      $("#t3, #t7, #t11").fadeIn(300); 
      }, 900); 
      setTimeout(function(){ 
      $("#t4, #t8, #t12").fadeIn(300); 
      }, 1200); 
      setTimeout(function(){ 
      $("#t2, #t6, #t10").fadeIn(300); 
      }, 1500); 
      setTimeout(function(){ 
      $("#t1, #t5, #t9").fadeIn(300); 
      }, 1800); 

      setTimeout(function(){ 
      $("#t3, #t7, #t11").fadeOut(300); 
      }, 3100); 
      setTimeout(function(){ 
      $("#t4, #t8, #t12").fadeOut(300); 
      }, 3100); 
      setTimeout(function(){ 
      $("#t2, #t6, #t10").fadeOut(300); 
      }, 3100); 
      setTimeout(function(){ 
      $("#t1, #t5, #t9").fadeOut(300); 
      }, 3100); 

     }; 

     var intervalFunctions = [ slide1, slide2, slide3 ]; 
     var intervalIndex = 0; 
     window.setInterval(function(){ 
     intervalFunctions[intervalIndex++ % intervalFunctions.length](); 
     }, 3000); 
}); 

CSS：

.center { 
      margin: 0px auto; 
      height: 600px; 
      width: 800px; 
      display: -webkit-box; 
      display: -moz-box; 
      display: -ms-flexbox; 
      display: -webkit-flex; 
      display: flex; 
      -webkit-flex-flow: row nowrap; 
      flex-flow: row nowrap; 
      justify-content: center; 
      -webkit-transition: all 2s ease; 
      -moz-transition: all 2s ease; 
      -o-transition: all 2s ease; 
      transition: all 2s ease; 

     } 

     .center.s2 { 
      width: 748px; 
     } 

      .img-h-t { 
      background: white; 
     } 

     #img-g-1 { 
      margin: 0 auto; 
     } 

     #img-g-2 { 
      margin: 0 auto; 
     } 

     #img-g-1 > .img-h-t { 
      margin-left: 8px; 
     } 

     #img-g-2 > .img-h-t { 
      margin-right: 8px; 
     } 

     #img-g-1 > .img-h-t.s2 { 
      margin-left: 4px; 
     } 

     #img-g-2 > .img-h-t.s2 { 
      margin-right: 4px; 
     } 

     #img-1-t, #img-3-t { 
      margin-bottom: 4px; 
     } 

     #img-2-t, #img-4-t { 
      margin-top: 4px; 
     } 

     #img-1-t { 
      margin-left: 24px !important; 
      height: 240px; 
      width: 312px; 
      -webkit-transition: all 2s ease; 
      -moz-transition: all 2s ease; 
      -o-transition: all 2s ease; 
      transition: all 2s ease; 
      -webkit-clip-path: polygon(156px 120px, 312px 0, 312px 240px, 0 240px); 
      clip-path: polygon(156px 120px, 312px 0, 312px 240px, 0 240px); 
      shape-inside: polygon(156px 120px, 312px 0, 312px 240px, 0 240px); 
     } 

     #img-1-t.img-1-s2{ 
      margin-left: 4px !important; 
      height: 270px; 
      width: 365px; 
      -webkit-clip-path: polygon(0 0, 365px 0, 365px 270px, 182.5px 270px); 
      clip-path: polygon(0 0, 365px 0, 365px 270px, 182.5px 270px); 
      shape-inside: polygon(0 0, 365px 0, 365px 270px, 182.5px 270px); 
     } 

     #img-1-t.img-1-s3{ 
      margin-left: 4px !important; 
      height: 300px; 
      width: 428px; 
      -webkit-clip-path: polygon(0 0, 428px 0, 206px 300px, 0 300px); 
      clip-path: polygon(0 0, 428px 0, 206px 300px, 0 300px); 
      shape-inside: polygon(0 0, 428px 0, 206px 300px, 0 300px); 
     } 

     #img-2-t { 
      height: 300px; 
      width: 328px; 
      -webkit-clip-path: polygon(164px 150px, 328px 300px, 328px 0, 0 0); 
      clip-path: polygon(164px 150px, 328px 300px, 328px 0, 0 0); 
      shape-inside: polygon(164px 150px, 328px 300px, 328px 0, 0 0); 
      transition: all 2s ease; 
     } 

      #img-2-t.img-2-s2{ 
       height: 270px; 
      width: 365px; 
      -webkit-clip-path: polygon(0 270px, 365px 270px, 365px 0, 182.5px 0); 
      clip-path: polygon(0 270px, 365px 270px, 365px 0, 182.5px 0); 
      shape-inside: polygon(0 270px, 365px 270px, 365px 0, 182.5px 0); 
     } 

     #img-2-t.img-2-s3{ 
      margin-bottom: 16px; 
      padding-bottom: 16px; 
      margin-left: 4px !important; 
      height: 240px; 
      width: 430px; 
      -webkit-clip-path: polygon(0 240px, 430px 240px, 205px 0, 0 0); 
      clip-path: polygon(0 240px, 430px 240px, 205px 0, 0 0); 
      shape-inside: polygon(0 240px, 430px 240px, 205px 0, 0 0); 
     } 

     #img-3-t { 
      height: 285px; 
      width: 418px; 
      -webkit-clip-path: polygon(0 285px, 418px 285px, 209px 142.5px, 0 0); 
      clip-path: polygon(0 285px, 418px 285px, 209px 142.5px, 0 0); 
      shape-inside: polygon(0 285px, 418px 285px, 209px 142.5px, 0 0); 
      transition: all 2s ease; 
     } 

      #img-3-t.img-3-s2{ 
       height: 270px; 
      width: 365px; 
      -webkit-clip-path: polygon(0 270px, 182.5px 270px, 365px 0, 0 0); 
      clip-path: polygon(0 270px, 182.5px 270px, 365px 0, 0 0); 
      shape-inside: polygon(0 270px, 182.5px 270px, 365px 0, 0 0); 
     } 

     #img-3-t.img-3-s3{ 
      height: 220px; 
      width: 346px; 
      -webkit-clip-path: polygon(172px 220px, 346px 220px, 346px 0, 0 0); 
      clip-path: polygon(172px 220px, 346px 220px, 346px 0, 0 0); 
      shape-inside: polygon(172px 220px, 346px 220px, 346px 0, 0 0); 
     } 
     #img-4-t { 
      margin-bottom: 16px; 
      padding-bottom: 16px; 
      height: 240px; 
      width: 448px; 
      -webkit-clip-path: polygon(0 240px, 224px 120px, 448px 0, 0 0); 
      clip-path: polygon(0 240px, 224px 120px, 448px 0, 0 0); 
      shape-inside: polygon(0 240px, 224px 120px, 448px 0, 0 0); 
      transition: all 2s ease; 
     } 

     #img-4-t.img-4-s2{ 
      margin-bottom: 0px; 
      padding-bottom: 0px; 
      height: 270px; 
      width: 365px; 
      -webkit-clip-path: polygon(0 270px, 365px 270px, 182.5px 0, 0 0); 
      clip-path: polygon(0 270px, 365px 270px, 182.5px 0, 0 0); 
      shape-inside: polygon(0 270px, 365px 270px, 182.5px 0, 0 0); 
     } 

     #img-4-t.img-4-s3{ 
      height: 320px; 
      width: 348px; 
      -webkit-clip-path: polygon(0 320px, 348px 320px, 348px 0, 172px 0); 
      clip-path: polygon(0 320px, 348px 320px, 348px 0, 172px 0); 
      shape-inside: polygon(0 320px, 348px 320px, 348px 0, 172px 0); 
     } 

Answer 1

などが、コメントで言いましたは新しい遅延を追加することしかできません...
多分、あなたは火で戦っていたかったでしょう...しかし、それは動作する方法ではありません。

​​を使用して、各アニメーションのステップをトリガーします。
3秒間隔です。

最初のページの読み込み後3秒後にこの間隔の繰り返しが発生します。
ちょうど文書準備ラッパーの終了前にこの権利を追加し、負荷のアニメーションの最初のステップをトリガーする：

intervalFunctions[intervalIndex++ % intervalFunctions.length](); 

それは負荷に、一度だけ実行されます。
その後、間隔が継続されます。あなたは何をしました意味ですか -

CodePen