animate.css动画库的使用方法：通过link标签引入到代码中，再向要设置动画的标记元素中添加animated类以及所需设置动画效果的动画类名
Animate.css是一个简单的CSS库，可以不用写太多的CSS代码就可以在网页上设置动画。它其实就是CSS3动画效果的即用型库集合。该库了一共提供了包含抖动（shake）、闪烁（flash）、弹跳（bounce）、翻转（flip）、旋转（rotateIn/rotateOut）、淡入淡出（fadeIn/fadeOut）等多达50多种不同的动画效果，这些效果在大多数支持CSS3的浏览器上都能保持一致
【推荐课程：CSS3教程】
立即学习“前端免费学习笔记（深入）”；
首先我们要将Animate.css库下载下来，通过link标签引入到我们的代码中
下载地址：http://cdn.bootcss.com/animate.css/3.5.2/animate.min.css
登录后复制
将Animate.css库加载到网页后，我们就可以访问其中所有写入的动画，并在元素上调用一个动画
首先必须将animated类添加到要设置动画的元素，然后添加空格，然后添加你想要的动画效果的类名
我们可以通过以下的这个链接寻找我们想要的动画效果的类名以及查看动画效果
链接地址：https://daneden.github.io/animate.css/
例：添加一个hinge动画效果
PHP中文网
登录后复制
如果想通过一些事件来触发效果可以通过JavaScript来实现。我们可以通过触发click事件并将类添加到元素中
例：
PHP中文网
$(function(){$(".btn").click(function(){$("h1").addClass('animated shake');});})
登录后复制
效果图：
同样我们还可以使用动画延迟和动画迭代计数更改动画中的延迟和播放的次数
.animated{-webkit-animation-iteration-count:5;-webkit-animation-duration:1s;animation-iteration-count:5;animation-duration:1s;}
登录后复制
效果图：
总结：以上就是本篇文章的全部内容了，希望通过这篇文章可以让大家对animate.css动画库有所了解。
以上就是如何使用animate.css动画库的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2889175.html
