基于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使网页、图片变成灰色兼容大多数浏览器
Jul 02 HTML / CSS
基于CSS3实现图片模糊过滤效果
Nov 19 HTML / CSS
CSS3中引入多种自定义字体font-face
Jun 12 HTML / CSS
css3实现二维码扫描特效的示例
Oct 29 HTML / CSS
HTML5实现分享到微信好友朋友圈QQ好友QQ空间微博二维码功能
Jan 03 HTML / CSS
html5 桌面提醒:Notifycations应用介绍
Nov 27 HTML / CSS
HTML5 Web Workers之网站也能多线程的实现
Apr 24 HTML / CSS
2014年圣诞节倒计时网页的制作过程
Dec 05 HTML / CSS
html5各种页面切换效果和模态对话框用法总结
Dec 15 HTML / CSS
canvas实现漂亮的下雨效果的示例
Apr 18 HTML / CSS
如何让pre和textarea等HTML元素去掉滚动条自动换行自适应文本内容高度
Aug 01 HTML / CSS
详解canvas.toDataURL()报错的解决方案全都在这了
Mar 31 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 数据结构 算法描述 冒泡排序 bubble sort
2011/07/10 PHP
php的webservice的wsdl的XML无法显示问题的解决方法
2014/03/11 PHP
使用Git实现Laravel项目的自动化部署
2019/11/24 PHP
JavaScript 特殊字符
2007/04/05 Javascript
List the Codec Files on a Computer
2007/06/11 Javascript
File, FileReader 和 Ajax 文件上传实例分析(php)
2011/04/27 Javascript
JQuery里选择超链接的实现代码
2011/05/22 Javascript
制作jquery遮罩层效果导航菜单代码分享
2013/12/25 Javascript
jQuery 设置 CSS 属性示例介绍
2014/01/16 Javascript
jquery中attr和prop的区别分析
2015/03/16 Javascript
js实现用户离开页面前提示是否离开此页面的方法(包括浏览器按钮事件)
2015/07/18 Javascript
深入解析Javascript闭包的功能及实现方法
2016/07/10 Javascript
原生JS实现-星级评分系统的简单实例
2016/08/21 Javascript
JavaScript日期对象(Date)基本用法示例
2017/01/18 Javascript
详谈jQuery中的一些正则匹配表达式
2017/03/08 Javascript
node.js程序作为服务并在windows下开机自启动(用forever)
2017/03/29 Javascript
JS简单实现获取元素的封装操作示例
2017/04/07 Javascript
vue项目中引入vue-datepicker插件的详解
2019/05/14 Javascript
Vue2.X和Vue3.0数据响应原理变化的区别
2019/11/07 Javascript
js实现中文实时时钟
2020/01/15 Javascript
[42:27]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#2Fnatic VS OG第三局
2016/03/05 DOTA
[06:44]2018DOTA2亚洲邀请赛4.5 SOLO赛 MidOne vs Sumail
2018/04/06 DOTA
[07:57]2018DOTA2国际邀请赛寻真——PSG.LGD凤凰浴火
2018/08/12 DOTA
Python科学计算环境推荐——Anaconda
2014/06/30 Python
总结Python中逻辑运算符的使用
2015/05/13 Python
python判断完全平方数的方法
2018/11/13 Python
深入解析神经网络从原理到实现
2019/07/26 Python
python Opencv计算图像相似度过程解析
2019/12/03 Python
Java提供了哪些企业应用编程接口
2015/02/13 面试题
通信工程毕业生求职信
2013/11/16 职场文书
巾帼文明岗申报材料
2014/05/01 职场文书
新教师岗前培训方案
2014/06/05 职场文书
故宫导游词
2015/01/31 职场文书
教师培训简讯
2015/07/20 职场文书
2016大学生党校学习心得体会
2016/01/06 职场文书
公务员的复习计划书,请收下!
2019/07/15 职场文书