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也非常简单,你可以 ...
随机推荐
- NOIP2007普及 守望者的逃离
传送门 普及组的题目……很水. 原来写了一个模拟不过好像状态考虑的不全得了80,这次我们考虑一下dp做法. 守卫者有两种移动的方法,一种是闪现,一种是跑,我们可以把闪现和跑分开处理. 首先只处理闪现的 ...
- Python mutilprocess模块之第二种创建进程方法--继承Process类
'''创建新的进程的第二种方法: 使用类的方式,可以自己定义一个类,继承Process类,每次实例化这个类的时候, 就等于实例化一个进程对象 '''from multiprocessing impor ...
- 容器之vector
#include <iostream> #include <vector> #include <string.h> #include <algorithm&g ...
- 数据连接池使用方法 JADI
1.编写context.xml 文件复制到 WebRoot/META_INF/context.xml <?xml version='1.0' encoding='utf-8'?> < ...
- 最优配餐_暴力bfs
问题描述 栋栋最近开了一家餐饮连锁店,提供外卖服务.随着连锁店越来越多,怎么合理的给客户送餐成为了一个急需解决的问题. 栋栋的连锁店所在的区域可以看成是一个n×n的方格图(如下图所示),方格的格点上的 ...
- 任务25:IHostEnvironment和 IApplicationLifetime介绍
任务25:IHostEnvironment和 IApplicationLifetime介绍 IHostingEnvironment这个里面有一些参数,比如我们当前应用程序的名称.目录的. await ...
- D3.js 线段生成器 (V3版本)
线段生成器 与线段生成器相关的方法: d3.svg.line() //创建一个线段生成器. line(data) //使用线段生成器绘制data数据. line.x([x]) //设置或获取线 ...
- 标准WPS框架下的空间信息处理服务部署方法
笔者第一篇博客里面曾介绍过将专题图制作功能发布为WPS,但随着后面的研究,才发现那时候发布的不是真正WPS框架下的服务,而只是通过Servlet将其发布为可调用的网络服务,所以今天再具体介绍一下真正的 ...
- 862. Shortest Subarray with Sum at Least K
Return the length of the shortest, non-empty, contiguous subarray of A with sum at least K. If there ...
- hdoj1150(最小点覆盖)
题意: 两台机器,A台机器有N种模式,B台机器有M种不同的模式,初始模式都是0 以及K个需要运行的任务(i,x,y),在A台机器是x模式,在B台机器是y模式. 请合理为每个任务安排一台机器并合理安排顺 ...