526互联

animate.css动画库

发布时间 2023-08-28 10:03:54作者: 一名小学生呀

使用CSS3的animation制作的动画效果的CSS集合，里面预设了很多种常用的动画（官网：https://animate.style/）

// 安装
npm install animate.css  （npm安装）

https://unpkg.com/animate.css@3.5.2/animate.min.css（在线cdn）

// 使用
// 想要使用哪种动画，只需要把通用类animated和相应的类添加到元素上
// 因为它是把不同的动画绑定到了不同的类里

<div class="animated bounce"></div>

完整代码示例（通过js添加或移除动画效果）：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://unpkg.com/animate.css@3.5.2/animate.min.css">
<style>
.box{
　　height: 100px;
　　width: 100px;
　　background-color: lightblue
}
</style>
</head>

<body>
　　<button id="btn1">添加</button>
　　<button id="btn2">移除</button>
　　<div id="box" class="box"></div>
　　<script>
　　　　var oBtn1 = document.getElementById('btn1');
　　　　var oBtn2 = document.getElementById('btn2');
　　　　var oBox = document.getElementById('box');
　　　　oBtn1.onclick = function(){
  　　　　oBox.classList.add('animated');
  　　　　oBox.classList.add('flash');
　　　　}
　　　　oBtn2.onclick = function(){
  　　　　oBox.classList.remove('flash');
　　　　}
　　</script>
</body>
</html>