Why isn't my Animate.css working?

Question

I got a piece of code from this website (github): https://daneden.github.io/animate.css/ . So this gives CSS code for CSS animations, and I decided to take the SlideInDown animation.

I put this in my CSS code, except it isn't working: what I am trying to move is a icon from Font Awesome: https://fortawesome.github.io/Font-Awesome/icon/arrow-down/

Here is my HTML:

<p>
    <i class="fa fa-arrow-down fa-5x slideInDown"></i>
</p>

CSS:

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

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

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

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

.slideInDown:hover {
  -webkit-animation-name: slideInDown;
  animation-name: slideInDown;
}

Why isn't this working? thanks!

Answer 1

According to the documentation , you just need to add the class animated to your element.

<i class="fa fa-arrow-down fa-5x slideInDown animated"></i>

If you aren't using the entire animate.css library, you will need the .animated {} properties from the stylesheet as well.