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动画库介绍的更多相关文章
- 048——VUE中使用animate.css动画库控制vue.js过渡效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 基于animate.css动画库的全屏滚动小插件，适用于vue.js(移动端、pc)项目
功能简介 基于animate.css动画库的全屏滚动,适用于vue.js(移动端.pc)项目. 安装 npm install vue-animate-fullpage --save 使用 main.j ...
- css3动画和animate.css动画库使用
CSS3动画 css3动画可以分为两种.transition过渡动画和keyframes关键帧动画 过渡动画 第一种叫过渡(transition)动画,就是从初始状态过渡到结束状态这个过程中所产生的动 ...
- （生产）animate.css 动画库
官网:https://daneden.github.io/animate.css/ Animate.css是一个有趣的,跨浏览器的css3动画库 用法 首先引入animate css文件: &l ...
- Animate.css动画库，简单的使用，以及源码剖析
animate.css是什么?能做些什么? animate.css是一个css动画库,使用它可以很方便的快捷的实现,我们想要的动画效果,而省去了操作js的麻烦.同时呢,它也是一个开源的库,在GitHu ...
- 让动画不再僵硬：Facebook Rebound Android动画库介绍
introduction official site:http://facebook.github.io/reboundgithub : https://github.com/facebook/reb ...
- vue中使用animate.css动画库
1.安装: npm install animate.css --save 2.引入及使用: //main.js中 import animated from 'animate.css' Vue.use( ...
- Facebook Rebound 弹性动画库 源码分析
Rebound源码分析 让动画不再僵硬:Facebook Rebound Android动画库介绍一文中介绍了rebound这个库. 对于想体验一下rebound的效果,又懒得clone和编译代码的, ...
- 强大的CSS3动画库animate.css
今天要给大家介绍一款强大的CSS3动画库animate.css,animate.css定义了大概50多种动画形式,包括淡入淡出,文字飞入.左右摇摆动画等等.使用animate.css也非常简单,你可以 ...
随机推荐
- BZOJ3355
3355: [Usaco2004 Jan]有序奶牛 Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 37 Solved: 19[Submit][Sta ...
- $(function() {})，即$(document).ready(function()，什么时候执行？以此为准
$(function() { //执行操作 }); $(function() {}) 是$(document).ready(function()的简写. 这个函数什么时候执行的呢? 答案:DOM加载完 ...
- 利用thrift在c++、java和python之间相互调用
转自:http://blog.csdn.net/andy_yf/article/details/7487384 thrift做为跨语言调用的方案有高效,支持语言较多,成熟等优点:代码侵入较强是其弱点. ...
- Educational Codeforces Round 21 D - Array Division （前缀和+二分）
传送门 题意 将n个数划分为两块,最多改变一个数的位置, 问能否使两块和相等 分析 因为我们最多只能移动一个数x,那么要么将该数往前移动,要么往后移动,一开始处理不需要移动的情况 那么遍历sum[i] ...
- hdoj1160【DP】
现在还很弱,贴一个我bin的结题报告日后写到一定会了加油 说说感觉,读题不读好,然后读完想不出,知道是dp不好好想,先排序一列,再求另一列,dp[ i ]代表长度,那么需要输出整个序列需要路径和一个标 ...
- Unity Transform常识（转）
Variables position: Vector3 物体在世界坐标中的位置. transform.position=Vector3(10,10,10)//把物体放到(x=10,y=10,z= ...
- python list生成表达式
列表生成式即List Comprehensions,是Python内置的非常简单却强大的可以用来创建list的生成式.运用列表生成式,可以写出非常简洁的代码. >>> list(ra ...
- PJzhang:工作之余一起来看剧
猫宁!!! 最近几个月陆续看了4部电视剧,不错,分别来自4个国家或地区,英国.日本.中国香港.俄罗斯,是的,没有美剧,平时真的很少看美剧. 1-IT狂人,英剧,一共4季,每季6集,每集25分钟左右. ...
- elasticsearch映射 mapping
mapping的格式个应用,主要是创建索引(数据库)的时候指明type 的field类型,然后elasticsearch可以自动解析
- Windows API 搭建OpenGL窗口
步骤: 1.创建windows窗口,得到窗口句柄hwnd 2.获取该窗口的设备环境hDC(当然也可以获取其他的设备环境,但我们一般是在创建的窗口上绘制) 3.创建OpenGL绘制环境RC,这个只能从h ...