当前位置: 代码迷 >> 综合 >> animate.css动画库使用笔记
  详细解决方案

animate.css动画库使用笔记

热度:47   发布时间:2023-12-17 14:54:49.0

1.安装

1-1、从github下载

https://github.com/daneden/animate.css

1-2、npm安装

npm install animate.css

2、使用:

2-1、在一般的使用中,直接在元素上添加animated和对应的类名即可,即给指定元素加入class"animated <动效名称>"

例如添加bounce效果:

<div class="animated bounce"></div>

2-2、通过事件动态改变 :通过js给元素添加或删除class,可以实现动态效果

2-3、动画的配置参数,比如动画持续时间,动画的执行次数等等,可以在元素上自行定义,覆盖掉animate.css里面所定义的

 

各类效果及配置参数查阅官网即可