animate.css用法介紹
阿新 • • 發佈：2018-11-11
animate.css介紹
- animate.css是一個跨瀏覽器的css3動畫庫
animate.css基礎使用
- 引入animate.css檔案
- 給指定的元素新增基礎class animated
- 給指定的元素新增動畫class
- 如果需要無限做動畫, 新增 infinite 類名即可
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="./css/animate.css"> <style> div{ width: 200px; height: 200px; background-color: red; margin: 100px; } </style> </head> <body> <div class="animated swing"></div> </body> </html>
animate.css和jQuery結合使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ padding: 0; margin: 0; } div{ width: 100px; height: 100px; background-color: orange; margin: 100px auto; } </style> <script src="./js/jquery.js"></script> <link rel="stylesheet" href="./css/animate.css"> <script> $(document).ready(function () { console.log('test'); $('#test').addClass('animated infinite rollIn'); }) </script> </head> <body> <div id="test"></div> </body> </html>
animate.css動畫屬性設定
- 編寫動畫屬性, 覆蓋animate.css庫中的預設屬性
- 編寫的時候注意選擇器的權重
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ padding: 0; margin: 0; } div{ width: 100px; height: 100px; background-color: gold; margin: 200px auto; } #test{ /*設定動畫屬性*/ animation-duration: 5s; animation-delay: 1s; animation-iteration-count: 2; } </style> <script src="./js/jquery.js"></script> <link rel="stylesheet" href="./css/animate.css"> <script> $(document).ready(function () { var $test = $('#test'); $test.addClass('animated swing'); }) </script> </head> <body> <div id="test"></div> </body> </html>
animate.css動畫結束後回撥
- 使用jQuery的one監聽動畫結束, 然後添加回調函式
- 動畫結束事件 webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
div{
width: 100px;
height: 100px;
background-color: skyblue;
margin: 200px auto;
}
#test{
/*設定動畫屬性*/
animation-duration: 3s;
animation-delay: 5s;
animation-iteration-count: 2;
}
</style>
<script src="./js/jquery.js"></script>
<link rel="stylesheet" href="./css/animate.css">
<script>
$(document).ready(function () {
var $test = $('#test');
$test.addClass('animated hinge');
$test.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () {
console.log('hello world'); // 兩次動畫完畢後才打印
console.log(this); // dom元素
$test.removeClass('hinge');
$test.addClass('animated rotateIn');
})
})
</script>
</head>
<body>
<div id="test"></div>
</body>
</html>