基于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实现类似翻书效果的过渡动画的示例代码
Sep 06 HTML / CSS
CSS3毛玻璃效果(blur)有白边问题的解决方法
Nov 15 HTML / CSS
CSS3 transforms应用于背景图像的解决方法
Apr 16 HTML / CSS
css3给背景图片加颜色遮罩的方法
Nov 05 HTML / CSS
css3实现背景模糊的三种方式(小结)
May 15 HTML / CSS
HTML5自定义data-* data(obj)属性和jquery的data()方法的使用
Dec 13 HTML / CSS
HTML5 input placeholder 颜色修改示例
May 30 HTML / CSS
HTML5+CSS3模仿优酷视频截图功能示例
Jan 05 HTML / CSS
HTML5 Canvas 实现圆形进度条并显示数字百分比效果示例
Aug 18 HTML / CSS
HTML实现代码雨源码及效果示例
Feb 25 HTML / CSS
Canvas 帧动画吃苹果小游戏
Aug 05 HTML / CSS
在HTML中引入CSS的几种方式介绍
Dec 06 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
ThinkPHP基本的增删查改操作实例教程
2014/08/22 PHP
php实现简单的MVC框架实例
2015/09/23 PHP
PHP使用trim函数去除字符串左右空格及特殊字符实例
2016/01/07 PHP
PHP面向对象五大原则之里氏替换原则(LSP)详解
2018/04/08 PHP
PHP后台实现微信小程序登录
2018/08/03 PHP
php慢查询日志和错误日志使用详解
2021/02/27 PHP
[原创]网络复制内容时常用的正则+editplus
2006/11/30 Javascript
JavaScript 自动分号插入(JavaScript synat:auto semicolon insertion)
2009/11/04 Javascript
如何将网页表格内容导入excel
2014/02/18 Javascript
jQuery is()函数用法3例
2014/05/06 Javascript
sogou地图API用法实例教程
2014/09/11 Javascript
EasyUi datagrid 实现表格分页
2015/02/10 Javascript
究竟什么是Node.js?Node.js有什么好处?
2015/05/29 Javascript
AngularJs bootstrap详解及示例代码
2016/09/01 Javascript
jQuery与JS加载事件用法分析
2016/09/04 Javascript
VueJs路由跳转——vue-router的使用详解
2017/01/10 Javascript
深入解析Vue 组件命名那些事
2017/07/18 Javascript
深入理解使用Vue实现Context-Menu的思考与总结
2019/03/09 Javascript
微信小程序调用天气接口并且渲染在页面过程详解
2019/06/24 Javascript
Python实例分享:快速查找出被挂马的文件
2014/06/08 Python
Python魔术方法详解
2015/02/14 Python
python如何将图片转换为字符图片
2020/08/19 Python
Python叠加两幅栅格图像的实现方法
2019/07/05 Python
python opencv鼠标事件实现画框圈定目标获取坐标信息
2020/04/18 Python
Django中自定义查询对象的具体使用
2019/10/13 Python
平面设计求职信
2014/03/10 职场文书
校庆标语集锦
2014/06/25 职场文书
个人安全生产责任书
2014/07/28 职场文书
甜品店创业计划书
2014/08/14 职场文书
自强自立美德少年事迹材料
2014/08/16 职场文书
老干部工作先进事迹
2014/08/17 职场文书
2014年销售助理工作总结
2014/12/01 职场文书
2015年财务部工作总结
2015/04/10 职场文书
苦儿流浪记读书笔记
2015/07/01 职场文书
七夕情人节问候语
2015/11/11 职场文书
「睡美人」爱洛公主粘土人开订
2022/03/22 日漫