css动画制作，css js动画

animate.css是一款强大且实用的css动画库，目前github的stars量69K以上

教程使用的是最新版本4.1.1

一、安装

1、通过npm工具安装

npm install animate.css --save

2、html文件直接导入

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

二、使用

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

1、引入css文件

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

Animate.css

3、常用效果

由大变小，向中间靠拢

Animate.css

由大变小，向中间靠拢

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

Animate.css

左右摇动

淡入

Animate.css

淡入

淡出

Animate.css

淡出

基于Y轴360度旋转

Animate.css

基于Y轴360度旋转

基于Y轴旋转淡出

Animate.css

基于Y轴旋转淡出

旋转进入

Animate.css

旋转进入

旋转出去

Animate.css

旋转出去

从左滑入

Animate.css

从左滑入

向左滑出

Animate.css

向左滑出

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