基于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中必须要知道的10个顶级命令
Apr 26 HTML / CSS
实现CSS3中的border-radius(边框圆角)示例代码
Jul 19 HTML / CSS
CSS3实现千变万化的文字阴影text-shadow效果设计
Apr 26 HTML / CSS
css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况
Dec 06 HTML / CSS
浅谈CSS3 动画卡顿解决方案
Jan 02 HTML / CSS
css3 flex布局 justify-content:space-between 最后一行左对齐
Jan 02 HTML / CSS
HTML5混合开发二维码扫描以及调用本地摄像头
Dec 27 HTML / CSS
html5中localStorage本地存储的简单使用
Jun 16 HTML / CSS
利用HTML5中Geolocation获取地理位置调用Google Map API在Google Map上定位
Jan 23 HTML / CSS
利用HTML5画出一个坦克的形状具体实现代码
Jun 20 HTML / CSS
浅谈Html5页面打开app的一些思考
Mar 30 HTML / CSS
HTML5之高度塌陷问题的解决
Jun 01 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使用GIFEncoder类生成gif动态滚动字幕
2014/07/01 PHP
PHP实现获取图片颜色值的方法
2014/07/11 PHP
php写入数据到CSV文件的方法
2015/03/14 PHP
php使用文本统计访问量的方法
2016/05/12 PHP
CL vs ForZe BO5 第五场 2.13
2021/03/10 DOTA
FormValidate 表单验证功能代码更新并提供下载
2008/08/23 Javascript
js控制div及网页相关属性的代码
2009/12/19 Javascript
jQuery总体架构的理解分析
2011/03/07 Javascript
jquery 滚动条事件简单实例
2013/07/12 Javascript
javascript实现画不相交的圆
2015/04/07 Javascript
JavaScript中判断两个字符串是否相等的方法
2015/07/07 Javascript
原生js验证简洁注册登录页面
2016/12/17 Javascript
vue中实现滚动加载更多的示例
2017/11/08 Javascript
js传递数组参数到后台controller的方法
2018/03/29 Javascript
jQuery实现图片上传预览效果功能完整实例【测试可用】
2018/05/28 jQuery
Vue下路由History模式打包后页面空白的解决方法
2018/06/29 Javascript
微信小程序 自定义复选框实现代码实例
2019/09/04 Javascript
使用Node.js实现base64和png文件相互转换的方法
2020/03/11 Javascript
Python 命令行非阻塞输入的小例子
2013/09/27 Python
Python ORM框架SQLAlchemy学习笔记之映射类使用实例和Session会话介绍
2014/06/10 Python
浅谈flask源码之请求过程
2018/07/26 Python
python使用pdfminer解析pdf文件的方法示例
2018/12/20 Python
理想高通滤波实现Python opencv示例
2019/01/30 Python
python把转列表为集合的方法
2019/06/28 Python
简单了解django索引的相关知识
2019/07/17 Python
关于numpy.where()函数 返回值的解释
2019/12/06 Python
Python-opencv实现红绿两色识别操作
2020/06/04 Python
煤矿班组长岗位职责
2013/12/29 职场文书
婚礼证婚人证婚词
2014/01/08 职场文书
两只小狮子教学反思
2014/02/05 职场文书
党员个人公开承诺书
2014/08/29 职场文书
烛光里的微笑观后感
2015/06/17 职场文书
2015小学毕业班工作总结
2015/07/21 职场文书
团组织关系介绍信
2019/06/24 职场文书
Nginx优化服务之网页压缩的实现方法
2021/03/31 Servers
正则表达式基础与常用验证表达式
2022/06/16 Javascript