- 引入animate.css
<link rel="stylesheet" href="./animate.css">
- 声明一个div并编写样式
<style>
div {
margin: 100px auto;
width: 200px;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
background: skyblue;
}
div .one {
//动画完成一个周期所需要的时间
animation-duration: 3s;
-webkit-animation-duration: 3s;
}
</style>
<body>
<div class="one">
我是一只小小小小鸟
</div>
</body>
- 在JS中给div添加animate类
- 使用jquery.js
<script src="./jq-3.31.js"></script>
<script>
/***
* 给div添加动画类
* animated是必须添加的，bounce是要执行的动画的类
*/
$(function () {
$('.one').addClass('animated bounce');
//可以在动画执行完取消
setTimeout(function () {
$('.one').removeClass('animated bounce');
},3000)
})
</script>
- 使用原生js
<script>
window.onload = function(){
let Div = document.getElementsByClassName('one');
Div[0].classList.add('animated');
Div[0].classList.add('bounce');
//可以在动画执行完取消
setTimeout(function () {
Div[0].classList.remove('bounce');
Div[0].classList.remove('animated');
},3000)
}
</script>
- 动画样式查看 ☛☛ animate.css官网
效果图.gif
