CSS动画特效

当我们在浏览一个网站的时候，总是发现一些有意思的特效，如鼠标放在文字上会跳动等等。对于CSS动画特效较差的同学和一些后端同学来实现这些功能，可能有些吃力了。

animate.css

animate.css是一个CSS动画库，他有我们常见的CSS动画。

animate.css使用方法

1.通过npm下载或者到animate.css官网或git上下载animate.css文件

2.将其引入到html页面中

 

3.为需要执行CSS动画的元素添加class类，其中animated 是必填的。其次到动画名称（选填）

 

下图是动画名称，动画主要分为几个大类，你可以注意到bonceln类的弹跳进场出场方式很容易记住。

 

这里填写一张class动画名称表

 

4.我们还可以添加delay-2s 延迟播放动画，即2秒后执行动画。

5.下面是代码的展示

 

总结

通过animate.css可以让我们开发页面的速度在动画特效上更加便捷高效了，不在需要自己从网上找案例然后慢慢的进行调试，测试。当然animate.css动画库的动画特效是大众特效，如果你需要设计更好看，效果更美的特效，这你只能自己查询网上资源自己慢慢测试了。使用animate.css可以让开发且美观都更快些。

如需转载，请注明文章出处和来源网址：http://www.divcss5.com/css-texiao/texiao58172.shtml