基于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动画效果的兼容多浏览器简单导航条示例
Jan 26 HTML / CSS
IE浏览器单独写CSS样式的几种方法
Oct 14 HTML / CSS
纯css3实现图片翻牌特效
Mar 10 HTML / CSS
CSS3色彩模式有哪些?CSS3 HSL色彩模式的定义
Apr 26 HTML / CSS
关于box-sizing的全面理解
Jul 28 HTML / CSS
CSS3制作3D立方体loading特效
Nov 09 HTML / CSS
html5配合css3实现带提示文字的输入框(摆脱js)
Mar 08 HTML / CSS
HTML5如何为形状图上颜色怎么绘制具有颜色和透明度的矩形
Jun 23 HTML / CSS
HTML5制作3D爱心动画教程 献给女友浪漫的礼物
Nov 05 HTML / CSS
Html5插件教程之添加浏览器放大镜效果的商品橱窗
Jan 07 HTML / CSS
详解如何解决H5开发使用wx.hideMenuItems无效果不生效
Jan 20 HTML / CSS
面试必问:圣杯布局和双飞翼布局的区别
May 13 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
PHP5.3.1 不再支持ISAPI
2010/01/08 PHP
PHP中的float类型使用说明
2010/07/27 PHP
php结合安卓客户端实现查询交互实例
2015/05/05 PHP
YII使用url组件美化管理的方法
2015/12/28 PHP
Yii2中添加全局函数的方法分析
2017/05/04 PHP
详解Yaf框架PHPUnit集成测试方法
2017/12/27 PHP
PHP hex2bin()函数用法讲解
2019/02/25 PHP
《JavaScript高级程序设计》阅读笔记(二) ECMAScript中的原始类型
2012/02/27 Javascript
JavaScript调用堆栈及setTimeout使用方法深入剖析
2013/02/16 Javascript
jQuery中attr()方法用法实例
2015/01/05 Javascript
javascript模拟php函数in_array
2015/04/27 Javascript
Javascript实现的Map集合工具类完整实例
2015/07/31 Javascript
JS操作COOKIE实现备忘记录的方法
2016/04/01 Javascript
javascript入门之string对象【新手必看】
2016/11/22 Javascript
js评分组件使用详解
2017/06/06 Javascript
mui 打开新窗口的方式总结及注意事项
2017/08/20 Javascript
详解wow.js中各种特效对应的类名
2017/09/13 Javascript
Vue 组件(component)教程之实现精美的日历方法示例
2018/01/08 Javascript
vue中可编辑树状表格的实现代码
2020/10/31 Javascript
[48:48]VGJ.T vs Liquid 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python中使用不同编码读写txt文件详解
2015/05/28 Python
Python制作简单的网页爬虫
2015/11/22 Python
运动检测ViBe算法python实现代码
2018/01/09 Python
下载官网python并安装的步骤详解
2019/10/12 Python
pandas读取csv文件提示不存在的解决方法及原因分析
2020/04/21 Python
Python+unittest+requests 接口自动化测试框架搭建教程
2020/10/09 Python
美国韩国化妆品和护肤品购物网站:Beautytap
2018/07/29 全球购物
实习医生自我评价
2013/09/22 职场文书
应届生求职信范文
2014/05/26 职场文书
公务员党的群众路线教育实践活动学习心得体会
2014/10/30 职场文书
自主招生推荐信怎么写
2015/03/26 职场文书
安全员岗位职责范本
2015/04/11 职场文书
财务统计员岗位职责
2015/04/14 职场文书
高三物理教学反思
2016/02/20 职场文书
python爬取网页版QQ空间,生成各类图表
2021/06/02 Python
Python matplotlib 利用随机函数生成变化图形
2022/04/26 Python