是什么 ? | : | 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 |
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">
step1、通过包管理器
安装animate.css
包管理器 | 安装命令 |
---|---|
bower | bower install animate.css --save |
npm | npm install animate.css --save |
yarn | yarn add animate.css |
<link href="/bower_components/animate.css/animate.min.css" rel="stylesheet">
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的时候就会再次触发动画。