animate中使用HTML5,animate.css怎么使用？

animate里面包含了许多常用的css动画，我们要使用的它的话需要把它加到自己的页面中，接着就可以在需要动画的元素标签上直接调用里面的动画，然后调节动画次数延迟等达到自己需要的效果就可以了。

animate.css怎么使用？

1、在文件夹中放入animate的css文件，以及一个html文件。|-project

∟index.html

∟animate.min.css

2、在html的头部添加我们的animate文件。(推荐学习：CSS视频教程)

Document

3、在需要动画的标签上添加 class="animated bounce delay-3s"，延迟3秒后播放animate中的bounce上下跳动动画。

animate.css怎么用？

4、在中间添加个infinite就可以循环播放动画。

animate.css怎么用？

5、我们还可以 自己添加class样式，在里面设置播放速度5秒，延迟2秒，循环播放，把定义好的 直接写到标签class前面 就可以了。

.my-anim{

animation-duration: 5s;

animation-delay: 2s;

animation-iteration-count: infinite;

}

animate.css怎么用？

animate.css怎么用？

6、如果要设置播放次数，可以把infinite修改为2，就是播放两次。

.my-anim{

animation-duration: 5s;

animation-delay: 2s;

animation-iteration-count: 2;

}

7、在浏览器打开就可以看到文字跳动的动画了,其它的动画同样如此使用，只需要修改动画名字就可以了。

更多CSS3相关技术文章，请访问CSS3答疑栏目进行学习！