Animate.css是一个开源 CSS 动画库，内置了很多常用的 CSS3 动画，兼容性好使用方便，并且整个文件非常轻小，只有几十 k！
使用方式非常简单，比如我们要给某段文字添加一个弹跳动画，首先引入 Animate.css 样式文件，在生产环境中建议引入压缩过的 min 文件，还可以使用 CDN 进行加速。引入代码如下：
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
</head>
第二步，进入 Animate.css 提供的动画演示站点，选择自己想要的动画效果。演示网站非常贴心，点击标签后，能够立刻查看到动画效果，方便选择。
第三步，给你想要添加动画的 html 元素加上 “animated” 和上一步中选中的动画样式名称即可：
<div class="animated fadeInUp"></div>Animate.css 本身是纯 CSS 实现，不支持动态添加类名，所以想要给某元素动态添加样式（比如点击后弹跳），需要配合 JavaScript 或 jQuery 实现。
相关导航
暂无评论...