css3animate怎么制作好看的动画效果

这篇文章主要讲解了“css3 animate怎么制作好看的动画效果”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“css3 animate怎么制作好看的动画效果”吧！

十余年的汕城网站建设经验，针对设计、前端、开发、售后、文案、推广等六对一服务，响应快，48小时及时工作处理。营销型网站建设的优势是能够根据用户设备显示端的尺寸不同，自动调整汕城建站的显示方式，使网站能够适用不同显示终端，在浏览器中调整网站的宽度，无论在任何一种浏览器上浏览网站，都能展现优雅布局与设计，从而大程度地提升浏览体验。创新互联公司从事“汕城网站设计”,“汕城网站推广”以来，每个客户项目都认真落实执行。

Animate.css是一个超强的CSS3动画库，它使用简单，只需要将相关效果对应的class加入页面元素中，就能实现翻转、滑动、旋转等等复杂超炫的跨浏览器的动画效果，它让开发这制作页面动画变得非常简单。
首先给大家展示效果图：

效果演示 源码下载

如何使用
首先引入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);

感谢各位的阅读，以上就是“css3 animate怎么制作好看的动画效果”的内容了，经过本文的学习后，相信大家对css3 animate怎么制作好看的动画效果这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是创新互联，小编将为大家推送更多相关知识点的文章，欢迎关注！