このCSSアニメーションのチェーンは無限に実行する必要がありますが、

Question

私は無期限に実行したいこの簡単なCSSアニメーションセットを持っています。しかし何らかの理由で、2回実行して停止します。

はここでここでCodePen example.

だ、私はjQueryのを使用してそれを実装する方法である（これはまた、コードの上に見られている）

$('#slide1').one(animationEnd,() => { 
    $('#slide1').css('display', 'none').removeClass('animate-1') 
    $('#slide2').css('display', '').addClass('animate-2') 
    }) 

    $('#slide2').one(animationEnd,() => { 
    $('#slide2').css('display', 'none').removeClass('animate-2') 
    $('#slide3').css('display', '').addClass('animate-3') 
    }) 

    $('#slide3').one(animationEnd,() => { 
    $('#slide3').css('display', 'none').removeClass('animate-3') 
    $('#slide1').css('display', '').addClass('animate-1') 
    }) 

は#slide3は、アニメーションのため#slide1に戻す必要があることを参照してください。それはしましたが、2サイクル後に停止します。

Answer 1

変数counterをconstと定義しましたが、後で再割り当てするにはletにする必要があります。

let counter = 0; 

また、あなたは、アニメーションの最後に結合するとき$.onの代わり$.oneを使用する必要があります。 $.onはハンドラをあるイベントにバインドするために使用されますが、$.oneは1回だけのバインドに使用されます（イベントが発生する最初のハンドラを実行しますが、これ以上は実行しません）。 JavaScriptを考慮にのみ3つのボックスを要するため、すでに与えられ、受け入れられ

https://codepen.io/anon/pen/WXNOKQ

Answer 2

答えは、これが唯一に関する情報です：

はここにあなたの更新例です。

animation-delayはinfinitlyループアニメーションを維持するために使用することができます。

body { 
 
    color: #FFFFFF; 
 
    background-color: #27292d; 
 
    overflow: hidden; 
 
    background: #27292d url('bg.jpg') no-repeat fixed center; 
 
    font-family: 'Roboto', sans-serif; 
 
} 
 

 
.slider-container { 
 
    position: absolute; 
 
    right: 0; 
 
    top: 40%; 
 
} 
 

 
.slider-content { 
 
    position: relative; 
 
    font-size: 32px; 
 
    text-transform: uppercase; 
 
} 
 

 
.boxes { 
 
    float: left; 
 
    padding: 10px 20px; 
 
    margin: 5px; 
 
    position: relative; 
 
} 
 

 
.sub-box { 
 
    clear: both; 
 
    margin-left: 60px; 
 
} 
 

 
.sub-box span { 
 
    color: #000000; 
 
    padding: 10px 20px; 
 
    background-color: #FFFFFF; 
 
} 
 

 
.box1 { 
 
    background-color: #FF4F80; 
 
} 
 

 
.box2 { 
 
    background-color: #4CA2F0; 
 
} 
 

 
.box3 { 
 
    background-color: #53CEC8; 
 
} 
 

 
@keyframes heartbeat { 
 
    0% { 
 
    transform: translate(100px, 200px) scale(0) 
 
    } 
 
    50% { 
 
    transform: translate(100px, 200px) scale(0) 
 
    } 
 
    60% { 
 
    transform: translate(-100px) scale(1.5) 
 
    } 
 
    70% { 
 
    transform: translate(-100px) scale(1.5) 
 
    } 
 
    80% { 
 
    transform: translate(-100px) scale(1.5) 
 
    } 
 
    100% { 
 
    transform: translate(100px, -200px) scale(0) 
 
    } 
 
} 
 

 
.slider-single { 
 
    position: absolute; 
 
    right: 0; 
 
    width: 400px; 
 
    height: 50px; 
 
    margin: 20px; 
 
    transform: scale(0); 
 
} 
 

 
.animate-1 { 
 
    transition: 300ms cubic-bezier(.17, .67, .55, 1.43); 
 
    animation: ease-out heartbeat 6s -3s infinite; 
 
} 
 

 
.animate-2 { 
 
    transition: 300ms cubic-bezier(.17, .67, .55, 1.43); 
 
    animation: ease-out heartbeat 6s -1s infinite; 
 
} 
 

 
.animate-3 { 
 
    transition: 300ms cubic-bezier(.17, .67, .55, 1.43); 
 
    animation: ease-out heartbeat 6s 1s infinite; 
 
}

<div class="slider-container"> 
 
    <div class="slider-content"> 
 

 
    <div id='slide1' class="slider-single animate-1"> 
 
     <div class=''> 
 
     <p class='boxes box1'>Pink Header</p> 
 
     </div> 
 
     <div class='sub-box'> 
 
     <span>White Header</span> 
 
     </div> 
 
    </div> 
 

 
    <div id='slide2' class="slider-single animate-2"> 
 
     <div> 
 
     <p class='boxes box2'>Another Header</p> 
 
     </div> 
 
     <div class='sub-box'> 
 
     <span>subheader</span> 
 
     </div> 
 
    </div> 
 

 
    <div id='slide3' class="slider-single animate-3"> 
 
     <div> 
 
     <p class='boxes box3'>10 more to go</p> 
 
     </div> 
 
    </div> 
 

 

 
    </div> 
 
</div> 
 
<div class="slider-container"> 
 
    <div class="slider-content"> 
 
    <div id='slide1' class="slider-single animate-1"> 
 
     <div class=''> 
 
     <p class='boxes box1'>Pink Header</p> 
 
     </div> 
 
     <div class='sub-box'> 
 
     <span>White Header</span> 
 
     </div> 
 
    </div> 
 
    <div id='slide2' class="slider-single" style='display:none;'> 
 
     <div> 
 
     <p class='boxes box2'>Another Header</p> 
 
     </div> 
 
     <div class='sub-box'> 
 
     <span>subheader</span> 
 
     </div> 
 
    </div> 
 
    <div id='slide3' class="slider-single" style='display:none;'> 
 
     <div> 
 
     <p class='boxes box3'>10 more to go</p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>