时间:2021-05-08
Animate.css是一个超强的CSS3动画库,它使用简单,只需要将相关效果对应的class加入页面元素中,就能实现翻转、滑动、旋转等等复杂超炫的跨浏览器的动画效果,它让开发这制作页面动画变得非常简单。
首先给大家展示效果图:
效果演示 源码下载
如何使用
首先引入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);
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
下面通过图文并茂的方式给大家展示下css3制作变形与动画效果css3制作动画的几个属性:变形(transform),过渡(transition)和动画(anim
SpinKit是一套网页动画效果,包含8种基于CSS3实现的很炫的加载动画。借助CSS3Animation的强大功能来创建平滑,易于定制的动画。SpinKit的
本篇文章主要介绍了css3动画过渡实现鼠标跟随导航效果,分享给大家,具体如下:鼠标跟随导航效果效果知识点:html/css布局思维,div+css讲解,css3
本文实例讲述了css3实现的多级渐变下拉菜单导航效果代码。分享给大家供大家参考。具体如下:这是一款基于css3实现的下拉菜单导航,是非常漂亮的动画菜单,而且是多
一、css3动画☺css3动画相对于通过JavaScript动态改变元素样式性能更好,更加容易。CSS3中有三个关于动画的属性:transform、