CSS3动画效果Animate.css基本使用方法
仲皓君
animate.css 是一个来自国外的 CSS3 动画库，它预设了抖动（shake）、闪烁（flash）、弹跳（bounce）、翻转（flip）、旋转（rotateIn/rotateOut）、淡入淡出（fadeIn/fadeOut）等多达 60 多种动画效果，几乎包含了所有常见的动画效果。官方文档
因为只有部分页面会使用所以建议cdn添加
<head>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
</head>
下载安装 4.0.0版本和一下版本存在使用区别
npm install animate.css 这个话直接下载的是最新版本的
npm install animate.css@0.0.0 这个@后面表示的是版本号 表示下载指定版本的
cdn的引用链接 可以直接复制相关代码
<link href="https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.css" rel="stylesheet">记得main.js引入使用
import animated from 'animate.css'
Vue.use(animated)使用区别
4.0.0版本以后的
安装Animate.css后，添加该类animate__animated元素，以及任何动画名称(不要忘记animate__前缀！):
<style>
#box{
width: 200px;
height: 200px;
background-color: red;
position: absolute;
}
</style>
<body>
<div id="box" class="animate__animated animate__backInDown"></div>
//使用方法，在class里加上类animate__animated与任何动画名称一起添加到元素,此处为抖动效果
</body>
animate__delay-2s
/*在类名后面添加延迟,延迟多少秒后执行范围为1~5,超出无效*/
4.0.0版本之前
<div class="animated fadeInUp"
class="animated fadeInDown">
<div v-show="show">
。。。。。。一些代码片段
</div>
</div>
类似资料：