插件描述：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. MySQL数据库学习----理论基础

    一:数据存储发展过程 1. 人工管理阶段 主要存储在纸带.磁带等介质中,手工记录,效率低下. 2. 文件系统阶段 存储在计算机磁盘中,以文件形式出现,数据管理变得简单,但是数据没有结构化处理,不易于查 ...

  2. bzoj1097

    最短路+状压dp 肯定是状压dp 那么我们把k个点的单源最短路预处理出来,然后dp[i][j]表示状态为i,当前在j需要走的最短距离,给定的限制用状态压一下就行了 注意特判k=0的情况 #includ ...

  3. 文本质量巧设置，一招让Visio 2007字体从模糊到清晰

    微软的Visio是一款很好用的画图工具,不过,它有一个地方不太好,就是中文字体比较模糊. 如下图: 矩形框内是宋体,9pt,字体很不清晰.无奈我就只好用雅黑字体,略微好一些. 今天发现一个设置,只有修 ...

  4. sharepoint服务器修改密码后出现HTTP Error 503

    HTTP Error 503   解决办法: 更改sharepoint 网站应用程序池标示后,更改标示重新输入管理员密码,问题解决!

  5. 昆石VOS3000_2.1.4.0完整安装包及安装脚本

    安装包下载地址:http://www.51voip.org/post/54.html 安装教程: 上传安装包 ·给整个目录授权 chmod 777 /root/vosintsall `核实 关闭sel ...

  6. 斯坦福CS231n—深度学习与计算机视觉----学习笔记 课时6

    课时6 线性分类器损失函数与最优化(上) 多类SVM损失:这是一个两分类支持向量机的泛化 SVM损失计算了所有不正确的例子,将所有不正确的类别的评分,与正确类别的评分之差加1,将得到的数值与0作比较, ...

  7. hdu1085 Holding Bin-Laden Captive!【生成函数】

    列出生成函数的多项式之后暴力乘即可 #include<iostream> #include<cstdio> #include<cstring> using name ...

  8. bzoj 3262 陌上花开 【CDQ分治】

    三维偏序 首先把所有花按 x一序,y二序,z三序 排序,然后去重,con记录同样的花的个数,然后进行cdq 现在假设有[l.r]区间,其中[l,mid] [mid+1,r],已经递归处理完毕.我们把区 ...

  9. BERT的几个可能的应用

      BERT是谷歌公司于2018年11月发布的一款新模型,它一种预训练语言表示的方法,在大量文本语料(维基百科)上训练了一个通用的"语言理解"模型,然后用这个模型去执行想做的NLP ...

  10. 3.bool布尔值int,str的转化，字符串的常用方法，字符串format，is判断（字符串的数字），for循环

    1.bool 布尔值 bool 布尔值 -- 用于条件使用 True 真 False 假 True 真 False 假 print(bool(-10)) # 0 是 False 非0的都是True p ...