900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > html+fadein动画 使用Animate.css制作超炫的CSS3动画

html+fadein动画 使用Animate.css制作超炫的CSS3动画

时间:2022-11-16 14:27:22

相关推荐

html+fadein动画 使用Animate.css制作超炫的CSS3动画

如何使用

首先引入animate css文件。

然后给指定的元素加上指定的动画class样式名。

这里包括两个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);

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。