基于css3 animate制作绚丽的动画效果


Posted in HTML / CSS onNovember 24, 2015

Animate.css是一个超强的CSS3动画库,它使用简单,只需要将相关效果对应的class加入页面元素中,就能实现翻转、滑动、旋转等等复杂超炫的跨浏览器的动画效果,它让开发这制作页面动画变得非常简单。
首先给大家展示效果图:

基于css3 animate制作绚丽的动画效果

效果演示 源码下载

如何使用
首先引入animate css文件。

复制代码
代码如下:

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

然后给指定的元素加上指定的动画class样式名。
复制代码
代码如下:

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

这里包括两个class名,第一个是基本的,也是必须添加的样式名,任何想实现的元素都得添加这个样式。第二个是指定的动画样式名,也就是想要什么动画效果,指定对应的动画样式名称就可以。如果想让动画循环则可以加入样式:infinite 。
Animate.css提供了以下多种动画效果可以直接作为class样式添加使用,就像文章:jQuery Easing 动画效果扩展提到的easing动画一样。
bounce ,flash ,pulse ,rubberBand ,shake ,swing ,tada ,wobble ,jello ,bounceIn ,bounceInDown ,bounceInLeft ,bounceInRight ,bounceInUp ,bounceOut ,bounceOutDown ,bounceOutLeft ,bounceOutRight ,bounceOutUp ,fadeIn ,fadeInDown ,fadeInDownBig ,fadeInLeft ,fadeInLeftBig ,fadeInRight ,fadeInRightBig ,fadeInUp ,fadeInUpBig ,fadeOut ,fadeOutDown ,fadeOutDownBig ,fadeOutLeft ,fadeOutLeftBig ,fadeOutRight ,fadeOutRightBig ,fadeOutUp ,fadeOutUpBig ,flipInX ,flipInY ,flipOutX ,flipOutY ,lightSpeedIn ,lightSpeedOut ,rotateIn ,rotateInDownLeft ,rotateInDownRight ,rotateInUpLeft ,rotateInUpRight ,rotateOut ,rotateOutDownLeft ,rotateOutDownRight ,rotateOutUpLeft ,rotateOutUpRight ,hinge ,rollIn ,rollOut ,zoomIn ,zoomInDown ,zoomInLeft ,zoomInRight ,zoomInUp ,zoomOut ,zoomOutDown ,zoomOutLeft ,zoomOutRight ,zoomOutUp ,slideInDown ,slideInLeft ,slideInRight ,slideInUp ,slideOutDown ,slideOutLeft ,slideOutRight ,slideOutUp
如果说想给某个元素动态添加动画样式,可以结合jquery来实现:
复制代码
代码如下:

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

当动画效果执行完成后还可以通过以下代码添加事件:
复制代码
代码如下:

$('#yourElement').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', doSomething);
HTML / CSS 相关文章推荐
CSS3 透明色 RGBA使用介绍
Aug 06 HTML / CSS
使用css3实现的tab选项卡代码分享
Dec 09 HTML / CSS
用CSS3的box-reflect来制作倒影效果
Nov 15 HTML / CSS
html5定制表单_动力节点Java学院整理
Jul 11 HTML / CSS
HTML 5 标签、属性、事件及浏览器兼容性速查表 附打包下载
Oct 20 HTML / CSS
让IE9以下版本的浏览器兼容HTML5的方法
Mar 12 HTML / CSS
Html5实现二维码扫描并解析
Jan 20 HTML / CSS
HTML5之tabindex属性全面解析
Jul 07 HTML / CSS
canvas生成带二维码海报的踩坑记录
Sep 11 HTML / CSS
Html5自定义字体解决方法
Oct 09 HTML / CSS
前端使用canvas生成盲水印的加密解密的实现
Dec 16 HTML / CSS
详解CSS不受控制的position fixed
May 25 HTML / CSS
基于Jquery和Css3代码制作可以缩放的搜索框
Nov 19 #HTML / CSS
基于CSS3实现图片模糊过滤效果
Nov 19 #HTML / CSS
Css3圆角边框制作代码
Nov 18 #HTML / CSS
CSS3绘制不规则图形的一些方法示例
Nov 07 #HTML / CSS
使用HTML和CSS3绘制基本卡通图案的示例分享
Nov 06 #HTML / CSS
使用CSS3的::selection改变选中文本颜色的方法
Sep 29 #HTML / CSS
CSS3绘制圆角矩形的简单示例
Sep 28 #HTML / CSS
You might like
php发送邮件的问题详解
2015/06/22 PHP
php获取指定(访客)IP所有信息(地址、邮政编码、国家、经纬度等)的方法
2015/07/06 PHP
PHP中的Session对象如何使用
2015/09/25 PHP
ThinkPHP2.x防范XSS跨站攻击的方法
2015/09/25 PHP
Session 失效的原因汇总及解决丢失办法
2015/09/30 PHP
this[] 指的是什么内容 讨论
2007/03/24 Javascript
jBox 2.3基于jquery的最新多功能对话框插件 常见使用问题解答
2011/11/10 Javascript
不到30行JS代码实现Excel表格的方法
2014/11/15 Javascript
jquery实现动态画圆
2014/12/04 Javascript
一款简单的jQuery图片标注效果附源码下载
2016/03/22 Javascript
Node.js Streams文件读写操作详解
2016/07/04 Javascript
详解Node.js如何开发命令行工具
2016/08/14 Javascript
javascript创建对象的3种方法
2016/11/02 Javascript
Vue实战之vue登录验证的实现代码
2017/10/31 Javascript
ES6中javascript实现函数绑定及类的事件绑定功能详解
2017/11/08 Javascript
微信小程序实现选项卡功能
2020/06/19 Javascript
vue和webpack项目构建过程常用的npm命令详解
2018/06/15 Javascript
浅谈vue中关于checkbox数据绑定v-model指令的个人理解
2018/11/14 Javascript
JS计算两个数组的交集、差集、并集、补集(多种实现方式)
2019/05/21 Javascript
小程序click-scroll组件设计
2019/06/18 Javascript
vue插槽slot的简单理解与用法实例分析
2020/03/14 Javascript
Python iter()函数用法实例分析
2018/03/17 Python
Python定时任务sched模块用法示例
2018/07/16 Python
Python get获取页面cookie代码实例
2018/09/12 Python
python3+requests接口自动化session操作方法
2018/10/13 Python
python爬取cnvd漏洞库信息的实例
2019/02/14 Python
python开头的coding设置方法
2019/08/08 Python
解决Python在导入文件时的FileNotFoundError问题
2020/04/10 Python
python通用数据库操作工具 pydbclib的使用简介
2020/12/21 Python
StubHub中国:购买和出售全球活动门票
2020/01/01 全球购物
软件测试题目
2013/02/27 面试题
《自然之道》教学反思
2014/02/11 职场文书
故宫导游词
2015/01/31 职场文书
详解Node.js如何处理ES6模块
2021/05/15 Javascript
python神经网络ResNet50模型
2022/05/06 Python
详解flex:1什么意思
2022/07/23 HTML / CSS