animate.css是一个很方便的动画库,可以通过npm
直接安装
npm install animate.css --save
安装以后打开node_modules
文件夹下的animate.css
文件夹下的animate-config.json
,把不需要的设为false
即可
"attention_seekers": {
"bounce": false,
"flash": false,
"pulse": false,
"rubberBand": false,
"shake": false,
"headShake": false,
"swing": false,
"tada": false,
"wobble": false,
"jello": false,
"heartBeat": false
},
使用方法是加在div
的class
中,第一个是定死的animated
,第二个是你使用的动画名称
<div class="animated bounce">Example</div>
当然,你还可以设置延迟,有四个选项,用法如下
<div class="animated bounce delay-2s">Example</div>
<div class="animated bounce delay-3s">Example</div>
<div class="animated bounce delay-4s">Example</div>
<div class="animated bounce delay-5s">Example</div>
你还可以设置动画的速度,有四个选项,用法如下,分别是慢,更慢,快,更快。
<div class="animated bounce slow">Example</div>
<div class="animated bounce slower">Example</div>
<div class="animated bounce fast">Example</div>
<div class="animated bounce faster">Example</div>