这个CSS动画链应该无限地运行，但它没有

Question

我有一组简单的CSS动画，我想无限期地运行。但出于某种原因，它只运行了两次并停止了。

这是一个CodePen例子。

下面是我如何使用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以获得动画。是的，但它在两个周期后就停止了。

Answer 1

答案已经给出并被接受了，这只适用于信息，因为javaScript只考虑了三个框。

animation-delay可用于保持动画无限循环：

​

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>

​