简介：
animate.css是一个使用CSS3的animation制作的动画效果的CSS集合，里面预设了很多种常用的动画，且使用非常简单。
首先引入animate.css
animate.css的最新版本是3.7.0，从官网下载
https://raw.githubusercontent.com/daneden/animate.css/master/animate.css
2、通过npm安装
$ npm install animate.css
概述
主要包括
- Attention(晃动效果)
- bounce(弹性缓冲效果)
- fade(透明度变化效果)
- flip(翻转效果)
- lightSpeed(光速效果)
- rotate(旋转效果)
- slide(滑动效果)
- zoom(变焦效果)
- special(特殊效果)
这9类
具体使用animate.css很简单：
<div class="animated bounce"></div>第二个class为需要的效果class
顺便还用到了下面的知识
- addEventListener() 方法用于向指定元素添加事件句柄。
- classList 属性返回元素的类名，该属性用于在元素中添加，移除及切换 CSS 类
- CSS 动画播放时，会发生以下三个事件：
animationstart - CSS 动画开始后触发
animationiteration - CSS 动画重复播放时触发
animationend - CSS 动画完成后触发
//html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="demo.css" />
<link rel="stylesheet" href="animate.css" />
</head>
<body>
<div class="content">
<div class="left">
<h4>Attention(晃动)演示</h4>
<div class="btnall ">
<button onclick="addClass('bounce')">bounce</button>
<button onclick="addClass('flash')">flash</button>
<button onclick="addClass('pulse')">pulse</button>
<button onclick="addClass('rubberBand')">rubberBand</button>
<button onclick="addClass('shake')">shake</button>
<button onclick="addClass('swing')">swing</button>
<button onclick="addClass('tada')">tada</button>
<button onclick="addClass('wobble')">wobble</button>
<button onclick="addClass('jello')">jello</button>
<button onclick="addClass('heartBeat')">heartBeat</button>
</div>
</div>
<div class="right">
<div id="demo" class="demo animated">
我是demo
</div>
</div>
</div>
<script type="text/javascript">
function addClass(val){
var u = ""+val;
//console.log(typeof(u));
var obj = document.getElementById("demo");
obj.classList.add(u);
obj.addEventListener("animationend",function(){
obj.classList.remove(u);
});
}
</script>
</body>
</html>
//css代码
.content{
width: 600px;
height: 400px;
}
.left{
height: 100%;
width: 50%;
float: left;
background-color: #23B2DD;
}
.right{
height: 100%;
width: 50%;
float: left;
background-color: #34CE57;
position: relative;
}
.btnall{
text-align: center;
}
button{
width: 40%;
}
.demo{
position: relative;
top: 40%;
margin: auto;
width: 30%;
height: 50px;
background-color: #9ACFEA;
}
@media(max-width: 600px){
.left{
height: 50%;
width: 100%;
}
.right{
height: 50%;
width: 100%;
}
.content{
width: 95%;
height: 500px;
}
}
欲知更多：具体可以在官方查找：https://daneden.github.io/animate.css/
网友评论