animate.css

1.1、animate.css简介

是什么 ?	`:`	`a cross-browser library of CSS animations. As easy to use as an easy thing.`
开发语言	`:`	CSS
官方主页	`:`	https://daneden.github.io/animate.css
源码仓库	`:`	https://github.com/daneden/animate.css

1.2、通过开源CDN引入animate.css

jsDelivr⤵︎

<link href="https://cdn.jsdelivr.net/npm/animate.css@3.7.2/animate.min.css" rel="stylesheet">

BootCDN⤵︎

<link href="https://cdn.bootcdn.net/ajax/libs/animate.css/3.7.2/animate.min.css" rel="stylesheet">

1.3、通过下载到本地引入animate.css

step1、通过包管理器安装animate.css

包管理器	安装命令
bower	`bower install animate.css --save`
npm	`npm install animate.css --save`
yarn	`yarn add animate.css`

step2、在HTML代码中引入CSS

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

1.4、使用animate.css

animate.css预设了抖动（shake）、闪烁（flash）、弹跳（bounce）、翻转（flip）、旋转（rotateIn/rotateOut）、淡入淡出（fadeIn/fadeOut）等多达60多种动画效果，几乎包含了所有常见的动画效果。

在要展示动画的元素上，使用animated类，再加上60多种动画的具体一种，示例：

如果动画是无限播放的，可以添加infinite类。

<div class="h1 animated rotateIn">刘富频</div>

如果直接写在HTML元素上，这种方式只能在页面加载完成后，执行一次动画，我们如果想要根据事件进行触发动画，需要配合上javascript，动态添加animated和具体动画类。如果想要多次显示动画，那么要在动画执行完成后的某个时机把animated和具体动画类remove掉，下次再添加这两个class的时候就会再次触发动画。