【animate.css】animate.css 的用法，轻松给页面加上动画
后阳炎
git地址：https://github.com/animate-css/animate.css
应用：
一、第一种方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
</head>
<body>
<h1 class="animate__animated animate__bounce">An animated element</h1>
</body>
1、第一步：引入animate.min.css
2、第二步：安装Animate.css之后，将该类animate__animated以及任何动画名称添加到元素中（不要忘记animate__前缀！）
3、成功。
二、第二种方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
<style>
.my-element {
animation: bounce;
/* referring directly to the animation's @keyframe declaration */
animation-duration: 2s;
/* don't forget to set a duration! */
}
</style>
</head>
<body>
<div class="my-element">我是一个动画</div>
</body>
</html>三、实例
1、想要动画循环执行
<h1 class="animate__animated animate__bounce animate__infinite">
An animated element
</h1>2、想要动画延迟执行（动画将在3秒后执行）
<h1 class="animate__animated animate__bounce animate__delay-3s">
An animated element
</h1>3、想要动画执行3次（1次、2次、3次）
<h1 class="animate__animated animate__bounce animate__repeat-3">
An animated element
</h1>以上。
类似资料：