Animate.css功能强大的纯CSS3动画库 - 资源分享

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

发布于 2017-07-01 字数 4142 浏览 2994 评论 7

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

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

使用方法

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;    //动画执行次数
}

相关链接

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(7

Jsmile 站长 回复 浮生未歇 2017-07-01 7 楼

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

浮生未歇 2017-07-01 6 楼

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

Jsmile 站长 回复 浮生未歇 2017-07-01 5 楼

再添加一个动画类:infinite

浮生未歇 2017-07-01 4 楼

怎么让它无限动起来呢

Jsmile 站长 回复 夜无邪 2017-07-01 3 楼

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

夜无邪 2017-07-01 2 楼

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

偏爱自由 2017-07-01 1 楼

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

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2891 文章
评论
84935 人气
更多

推荐作者

时光倒影

文章 0 评论

qq_YyjhCs

文章 0 评论

三人与歌

文章 0 评论

┼──瘾||

文章 1 评论