插件描述：Animate.css内置了很多典型的css3动画，兼容性好使用方便。

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

用法

1、首先引入animate css文件

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

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

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

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

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

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

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

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

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

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

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

1
2
3
4
5
6
$(function(){
    $('#jq22').addClass('animated bounce');
    setTimeout(function(){
        $('#jq22').removeClass('bounce');
    }, 1000);
});

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

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

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

Animate.css_css3动画库介绍的更多相关文章

  1. 048——VUE中使用animate.css动画库控制vue.js过渡效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. 基于animate.css动画库的全屏滚动小插件，适用于vue.js(移动端、pc)项目

    功能简介 基于animate.css动画库的全屏滚动,适用于vue.js(移动端.pc)项目. 安装 npm install vue-animate-fullpage --save 使用 main.j ...

  3. css3动画和animate.css动画库使用

    CSS3动画 css3动画可以分为两种.transition过渡动画和keyframes关键帧动画 过渡动画 第一种叫过渡(transition)动画,就是从初始状态过渡到结束状态这个过程中所产生的动 ...

  4. （生产）animate.css 动画库

    官网:https://daneden.github.io/animate.css/ Animate.css是一个有趣的,跨浏览器的css3动画库 用法 首先引入animate css文件:    &l ...

  5. Animate.css动画库，简单的使用，以及源码剖析

    animate.css是什么?能做些什么? animate.css是一个css动画库,使用它可以很方便的快捷的实现,我们想要的动画效果,而省去了操作js的麻烦.同时呢,它也是一个开源的库,在GitHu ...

  6. 让动画不再僵硬：Facebook Rebound Android动画库介绍

    introduction official site:http://facebook.github.io/reboundgithub : https://github.com/facebook/reb ...

  7. vue中使用animate.css动画库

    1.安装: npm install animate.css --save 2.引入及使用: //main.js中 import animated from 'animate.css' Vue.use( ...

  8. Facebook Rebound 弹性动画库 源码分析

    Rebound源码分析 让动画不再僵硬:Facebook Rebound Android动画库介绍一文中介绍了rebound这个库. 对于想体验一下rebound的效果,又懒得clone和编译代码的, ...

  9. 强大的CSS3动画库animate.css

    今天要给大家介绍一款强大的CSS3动画库animate.css,animate.css定义了大概50多种动画形式,包括淡入淡出,文字飞入.左右摇摆动画等等.使用animate.css也非常简单,你可以 ...

随机推荐

  1. SimpleDateFormat并发隐患及其解决

    此文已由作者姚太行授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. SimpleDateFormat被大量使用于处理时间格式化过程,由于该类在创建时会指定一个pattern用于 ...

  2. poj1979【基础bfs/dfs】

    挑战习题搜索-1 题意: 给定起点,然后求一个可以到达的数量,位置"."都可以走.每次应该是上下左右都可以走. 思路: 这题应该DFS更好写,但是BFS也可以写吧. 好久没写了- ...

  3. P1228-重叠的图像

    一道很水的topsort,唉?怎么交了14遍...(某人用我的代码刚好卡过,我怎么过不去...[鄙视][鄙视][鄙视]) #include <bits/stdc++.h> using na ...

  4. Mac上搭建直播服务器Nginx+rtmp，实现手机推流、拉流

    转载自http://www.cnblogs.com/jys509/p/5649066.html 简介 nginx是非常优秀的开源服务器,用它来做hls或者rtmp流媒体服务器是非常不错的选择,本人在网 ...

  5. RobotFramework自动化测试框架（2）- RobotFramework语法

    RobotFramework测试用例是由四部分组成的,下面就从这四个部分简单介绍语法: 关键字表 *** Keywords *** 设置表 *** Settings *** 变量表 *** Varia ...

  6. Centos 7.x 配置Gitlab

    GitLab 是一个用于仓库管理系统的开源项目,使用Git作为代码管理工具,并在此基础上搭建起来的web服务. 1. 安装并配置必要的依赖关系 如果你想使用 Postfix 发送邮件,请在安装过程中根 ...

  7. win和mac系统Sublime Text 3配置编译c和c++

    widows安装 安装MinGW MinGW是Minimalist GNU on Windows的首字母缩写,安装后就可以使用很多的GNU工具.GNU(GNU’s Not Unix)是linux中的一 ...

  8. System.Web.Mvc 和 using System.Net.Http 的 Filter

    在尝试给webapi增加 ExceptionFilter时,出现了错误,经查询区别如下: System.Web.Mvc.Filters 是给mvc用的 System.Web.Http.Filters ...

  9. web简单的整体测试

    网站性能压力测试是性能调优过程中必不可少的一环.只有让服务器处在高压情况下才能真正体现出各种设置所暴露的问题 ab测试 ab命令会创建很多的并发访问线程,模拟多个访问者同时对某一URL地址进行访问.它 ...

  10. SQL 列拼接使用

    一个产品收藏表 Collection , 把该产品被收藏的人拼接在一列中如下: SQL SERVER SELECT ProjectID, UserIDs = ','+(STUFF((SELECT ', ...