为什么我的 Animate.css 不工作?
Why isn't my Animate.css working?
我从这个网站 (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;
}
为什么这不起作用?谢谢!
根据 documentation,您只需将 class animated
添加到您的元素即可。
<i class="fa fa-arrow-down fa-5x slideInDown animated"></i>
如果您不使用整个 animate.css 库,您还需要 the stylesheet 中的 .animated {}
属性。
我从这个网站 (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;
}
为什么这不起作用?谢谢!
根据 documentation,您只需将 class animated
添加到您的元素即可。
<i class="fa fa-arrow-down fa-5x slideInDown animated"></i>
如果您不使用整个 animate.css 库,您还需要 the stylesheet 中的 .animated {}
属性。