如何显示动画：无

display: none通常导致动画停止。然而，有一个技巧，使它的工作描述：
So, you’d like to animate the display property。
简而言之，动画元素需要在display: block和display: none之间转换。显然，这不能在所有情况下都使用，但它适用于这个问题，而且很好知道。

代码片段

// hide each DIV in the container sequentially

document.querySelector('section')
  .addEventListener('transitionend', function(e) {

    console.log(e.type,
      e.propertyName,
      e.target.tagName,
      e.target.innerText
    );

    // There is one event per animated property, so need to check which
    
    if (e.propertyName === 'display') {
      this.querySelector('div:not(.hide)')?.classList.add('hide');

    }
  });

// start by hiding the first DIV

setTimeout(() =>
  document.querySelector('section div:first-child').classList.add('hide'),
  500);

section div {
  font-size: 1.4rem;
}

.hide {
  transition: opacity, display;
  transition-duration: 1s;
  transition-delay: 0.5s;
  display: none;
  opacity: 0;
}

<section>
  <div>Lions</div>
  <div>Tigers</div>
  <div>Bears</div>
  <div>Elephants</div>
  <div>Zebras</div>
</section>