一、安装

1、通过npm工具安装

npm install animate.css --save

2、html文件直接导入

github搜索moment直接下载源码文件包

<link rel="stylesheet" href="./css/animate.min.css" />

二、使用

我分享一些在工作开发中使用频率比较高的动画效果，其它的效果大家可以在官网上查看

1、引入css文件

<link rel="stylesheet" href="./css/animate.min.css" />

2、构造需要设置动画的元素，加上class基础类名"animate_animated"，如果需要什么动画效果再在这基本上加上对应的class动画类名

<div class="animate__animated animate__bounce">Animate.css</div>

3、常用效果

由大变小，向中间靠拢

<div class="animate__animated animate__rubberBand">Animate.css</div>

由大变小，向中间靠拢

左右摇动，类似ios手机密码输错时的提醒效果

<div class="animate__animated animate__shakeX">Animate.css</div>

左右摇动

淡入

<div class="animate__animated animate__fadeIn">Animate.css</div>

淡入

淡出

<div class="animate__animated animate__fadeOut">Animate.css</div>

淡出

基于Y轴360度旋转

<div class="animate__animated animate__flip">Animate.css</div>

基于Y轴360度旋转

基于Y轴旋转淡出

<div class="animate__animated animate__flipOutY">Animate.css</div>

基于Y轴旋转淡出

旋转进入

<div class="animate__animated animate__rotateIn">Animate.css</div>

旋转进入

旋转出去

<div class="animate__animated animate__rotateOut">Animate.css</div>

旋转出去

从左滑入

<div class="animate__animated animate__slideInLeft">Animate.css</div>

从左滑入

向左滑出

<div class="animate__animated animate__slideOutLeft">Animate.css</div>

向左滑出

觉得效果不错的请帮忙加个关注点个赞，每天分享前端实用开发技巧