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，您只需要将类animated添加到元素中。

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

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

为什么我的Animate.css没有工作？

1 个答案: