Animate.css animation disappears after animation is complete

Question

I'm trying to build a menu that has a series of animations per list item. It works but after the animation the item disappears agains. It seams like the visible property of .animated is not used. Any directions you can give me to fix this problem?

<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;
    }
  }
}

Berci · Answer 1 · 2020-02-05T11:42:49.680

I suggest you to define your own animation if that one is not working as you wish. If I am not mistaken the predefined animation is somthing like this

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

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

So your animation will have to be:

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

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

and then just add animation-fill-mode: forwards; to your li in css to keep the visibility (so your css becomes something like):

@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;
    ...

Working example here

You might laso need to add vendor prefixes to the keyframes in order to make sure that everything is working fine cross browsers. You can read more about them here and here. But in scss you can define a general vendor prefixer like here

Animate.css animation disappears after animation is complete

1 Answers1

Linked