这个CSS动画链应该运行无限，但它不会

Question

我有这个简单的CSS动画集，我想无限期地运行。但由于某种原因，它只运行两次并停止。

这里有一个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仅用于一次性绑定（在事件发生时首次运行处理程序，但不再那么做）。

这是你更新的例子：

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

Answer 2

答案已经给和接受，这只是相关信息，因为JavaScript的只需要三盒进去。

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>