Animate.css功能强大的纯CSS3动画库

Question

Animate.css是一个CSS3动画库，他为我们预设了很多可以使用的动画效果，比如弹跳、飘过、滑动、渐变的等特效，简单好用，只需要添加对应的动画Class到元素上，即可调用插件的动画效果，而且支持跨浏览器使用。

使用方法

1、先下载插件，你可以在Github上找到，然后引入到我们的项目中：

<link rel="stylesheet" href="animate.min.css">

2、将类动画添加到您想要动画的元素中。您还可能希望将类infinite包含到无限循环中。可支持的动画类列表

bounce	flash	pulse	rubberBand
shake	headShake	swing	tada
wobble	jello	bounceIn	bounceInDown
bounceInLeft	bounceInRight	bounceInUp	bounceOut
bounceOutDown	bounceOutLeft	bounceOutRight	bounceOutUp
fadeIn	fadeInDown	fadeInDownBig	fadeInLeft
fadeInLeftBig	fadeInRight	fadeInRightBig	fadeInUp
fadeInUpBig	fadeOut	fadeOutDown	fadeOutDownBig
fadeOutLeft	fadeOutLeftBig	fadeOutRight	fadeOutRightBig
fadeOutUp	fadeOutUpBig	flipInX	flipInY
flipOutX	flipOutY	lightSpeedIn	lightSpeedOut
rotateIn	rotateInDownLeft	rotateInDownRight	rotateInUpLeft
rotateInUpRight	rotateOut	rotateOutDownLeft	rotateOutDownRight
rotateOutUpLeft	rotateOutUpRight	hinge	jackInTheBox
rollIn	rollOut	zoomIn	zoomInDown
zoomInLeft	zoomInRight	zoomInUp	zoomOut
zoomOutDown	zoomOutLeft	zoomOutRight	zoomOutUp
slideInDown	slideInLeft	slideInRight	slideInUp
slideOutDown	slideOutLeft	slideOutRight	slideOutUp

这里包括两个class名，第一个是基本的，必须添加的样式名，任何想实现的元素都得添加这个。第二个是指定的动画样式名。

3、如果说想给某个元素动态添加动画样式，可以通过jquery来实现：

$('#yourElement').addClass('animated bounceOutLeft');

4、当动画效果执行完成后还可以通过以下代码添加事件

$('#yourElement').one('webkitAnimationEnd MSAnimationEnd', doSomething);

你也可以通过 JavaScript 或 jQuery 给元素添加这些 class，比如：

$(function(){
    $('#demo').addClass('animated bounce');
});

有些动画效果最后会让元素不可见，比如淡出、向左滑动等等，可能你又需要将 class 删除，比如：

$(function(){
    $('#demo').addClass('animated bounce');
    setTimeout(function(){
        $('#demo').removeClass('bounce');
    }, 1000);
});

animate.css 的默认设置也许有些时候并不是我们想要的，所以你可以重新设置，比如：

#demo{
    animate-duration: 2s;    //动画持续时间
    animate-delay: 1s;    //动画延迟时间
    animate-iteration-count: 2;    //动画执行次数
}

相关链接

• Github地址：https://github.com/daneden/animate.css
• 在线示例：https://www.wenjiangs.com/wp-content/uploads/2017/07/animate.css/

Answer 1

用回调函数，参照上面第四点说明。

Answer 2

请教大神，请问怎么连续添加动画，比如同样一张图片，我先动画进来，然后再怎么设定动画出去呢？

Answer 3

再添加一个动画类：infinite

Answer 4

怎么让它无限动起来呢

Answer 5

用JS控制，当鼠标悬停的时候添加对应动画的class

Answer 6

这些动画都是在进入页面就立刻执行，如何让它在特定的时候执行呢？比如鼠标悬停在一个li上的<a>标签上时，<a>标签的一个子元素小图标执行动画，鼠标不悬停的时候动画不执行

Answer 7

执行动画时图片变模糊，动画完成图片就正常了，而且之前一直没毛病，突然一次试验以后就成这样了