Animate.css 一款强大的预设css3动画库

所属分类:其他-动画效果

 250312  453  查看评论 (35)
Animate.css 一款强大的预设css3动画库 ie兼容9

Animate.css是一个有趣的,跨浏览器的css3动画库。很值得我们在项目中引用。

用法

1、首先引入animate css文件

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

2、给指定的元素加上指定的动画样式名

<div class="animated bounceOutLeft"></div>

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

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

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

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

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

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

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

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

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

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

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

所有的动画样式名请参见demo页面。


相关插件-动画效果

商品飞入购物车动画效果

jQuery商品飞入购物车动画效果
  动画效果
 9425  99

简单的雪花飘落效果

原生js+图片实现雪花飘落的效果;内容简单,注释完整,无压缩
  动画效果
 1772  13

3D雪花特效-绝对逼真

3D雪花特效-绝对逼真
  动画效果
 11666  97

CSS3下雪动画

现在,您可以用 CSS3 创建令人惊叹的动画。但是,我敢打赌你是知道的。关键字关于 CSS3 动画的时候是 CSS3 @keyframes规则,在这篇文章中,您将学习如何创建一个令人敬畏的 CSS3 动画。
  动画效果
 11366  20

讨论这个项目(35)回答他人问题或分享插件使用方法奖励jQ币

    zhuzhuxiayy0
    2017/1/13 11:01:12
    我用的transition-delay和animate-delay延迟加载都不起作用呢 回复
    [!..!]0
    2017/1/4 14:01:19

    怎么做列队动画

        0
        2017/1/17 15:06:22

        queue和dequeue做。

    回复
      0
    2016/12/16 16:12:51
    够狠才是男人0
    2016/12/16 16:12:01
    这个和wow.js那个好 回复
    筱子郗0
    2016/12/13 13:12:05
    请问是先执行后延迟,还是先延迟后执行? 回复
    fhe0
    2016/12/8 17:12:44
    当浏览到该元素时候出现,怎么解决?
        银色上弦月0
        2017/1/18 10:37:17

        ScrollReveal.js

    回复
    相忘于江湖0
    2016/10/21 23:10:09
    如何兼容ie6
        梦里葬花い1
        2016/11/24 11:11:10
        IE6连PNG图片都不支持,CSS3的所有属性基本上都不支持,要做动画什么的就不要考虑IE6了,用JQ能很难实现,而且还很卡!!
        0
        2017/1/17 15:07:00

        IE6是什么鬼,还有人用吗?windows98?

    回复
    狠一点0
    2016/10/21 11:10:50
    这个可以用在fullpage.js 一块使用吗
        海水正蓝0
        2016/11/30 14:11:52
        可以的
    回复
    天使*恋人0
    2016/9/10 17:09:56
    这个可以添加延迟吗,求解!
        拎不清。0
        2016/9/22 16:09:52
        可以啊 在css里面加transition-delay就可以了
    回复
    Justin(晨)0
    2016/8/22 15:08:28
    https://github.com/justinzzc/aniAuto 便捷的jquery插件 配套使用效果更佳哦 回复
取消回复
    PROMULGATOR

    hacker

    火星