Animate.css动画完成后动画消失

我正在尝试构建一个菜单，每个列表项都有一系列动画。它有效，但动画结束后该项目再次消失。看起来 .animated 的可见属性没有被使用。您可以给我任何指示来解决这个问题吗？

<ul class="menu-ani-item">
  <li class="animated">Hello World</li>
  <li class="animated">Hello World</li>
  <li class="animated">Hello World</li>
  <li class="animated">Hello World</li>
  <li class="animated">Hello World</li>
  <li class="animated">Hello World</li>
  <li class="animated">Hello World</li>
  <li class="animated">Hello World</li>
  <li class="animated">Hello World</li>
  <li class="animated">Hello World</li>
  <li class="animated">Hello World</li>
  <li class="animated">Hello World</li>
</ul>

.menu-ani-item {
  li {
    animation: slideInDown 2s;
    visibility: hidden;
    &:nth-child(1) {
      animation-delay: 0s;
    }
    &:nth-child(2) {
      animation-delay: 2s;
    }
    &:nth-child(3) {
      animation-delay: 3s;
    }
    &:nth-child(4) {
      animation-delay: 4s;
    }
    &:nth-child(5) {
      animation-delay: 5s;
    }
    &:nth-child(6) {
      animation-delay: 6s;
    }
    &:nth-child(7) {
      animation-delay: 7s;
    }
    &:nth-child(8) {
      animation-delay: 8s;
    }
    &:nth-child(9) {
      animation-delay: 9s;
    }
    &:nth-child(10) {
      animation-delay: 10s;
    }
    &:nth-child(11) {
      animation-delay: 11s;
    }
    &:nth-child(12) {
      animation-delay: 12s;
    }
  }
}

如果动画不能按您的意愿工作，我建议您定义自己的动画。如果我没记错的话，预定义的动画是这样的

@keyframes slideInDown {
  from {
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

所以你的动画必须是：

@keyframes slideInDown {
  from {
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }

  to {
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }
}

然后添加animation-fill-mode: forwards;到你的CSS中的li以保持可见性（所以你的CSS变得像这样）：

@keyframes slideInDown {
  from {
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }

  to {
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }
}
.menu-ani-item {
  li {
    animation: slideInDown 2s;
    animation-fill-mode: forwards;
    visibility: hidden;
    ...

工作示例在这里 https://codepen.io/Berci/pen/BaNBbyQ

您可能需要向关键帧添加供应商前缀，以确保跨浏览器一切正常。您可以阅读有关他们的更多信息here https://stackoverflow.com/questions/20617601/cross-browser-css3-keyframe-animation-firefox and here https://stackoverflow.com/questions/5411026/list-of-css-vendor-prefixes。但在 scss 中，您可以定义通用供应商前缀，例如here https://golightlyplus.com/vendor-prefixes-for-css3-animations-using-scss/