为什么我的 Animate.css 不工作？

Question

我从这个网站 (github) 获得了一段代码：https://daneden.github.io/animate.css/。所以这为 CSS 动画提供了 CSS 代码，我决定采用 SlideInDown 动画。

我把它放在我的 CSS 代码中，但它不起作用：我要移动的是来自 Font Awesome 的图标：https://fortawesome.github.io/Font-Awesome/icon/arrow-down/

这是我的 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;
}

为什么这不起作用？谢谢！

Answer 1

根据 documentation，您只需将 class animated 添加到您的元素即可。

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

如果您不使用整个 animate.css 库，您还需要 the stylesheet 中的 .animated {} 属性。

为什么我的 Animate.css 不工作？

Why isn't my Animate.css working?

html

css

css-animations

font-awesome