如何使用動畫庫animate.css

時間 2019-11-29

標籤如何使用動畫 animate.css animate css 欄目 CSS 简体版

原文原文鏈接

animate.css是一個CSS3動畫庫，裏面預設了抖動(shake)、閃爍(flash)、彈跳(bounce)、翻轉(flip)、旋轉(rotateIn/rotateOut)、淡入淡出(fadeIn/fadeOut)等多達 60 多種動畫效果。你能夠點擊打開它的官網查看演示，裏面幾乎包含了全部常見的動畫效果。媽媽在也不用擔憂我不會寫動畫了！！！css

演示地址動畫演示地址。html

下載地址連接點擊下載地址連接下載，打開的是一個css文件直接Ctrl+A全選 Ctrl+C複製便可。jquery

如何使用：git

先來看一個簡單的示例：github

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 引入 animate.css -->
    <link rel="stylesheet" href="./css/animate.css">
    <style>
        .box {
            width: 200px;
            height: 200px;
            margin: 0 auto;
            background-color: pink;
        }
    </style>
</head>
<body>
    <!-- 打開瀏覽器就能夠看到其效果了 -->
    <div class="box animated bounce">盒子</div>
</body>
</html>

首先頁面引入 animate.css。把 animated 添加到類屬性上， animated 是動畫的一個基類每一個動畫都必須添加緊接着後面就是動畫名。 web

例如：瀏覽器

<div class="box animated jello">盒子</div>

原生js添加動畫示例：函數

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 引入 animate.css -->
    <link rel="stylesheet" href="./css/animate.css">
    <style>
        .box {
            position: relative;
            left: 78px;
            width: 200px;
            height: 200px;
            margin: 0 auto;
            background-color: pink;
        }
        button { display: block; margin: auto;}
    </style>
</head>
<body>
    <div class="box" id="box">盒子</div>
    <button id="btn">點我</button>
    <script>
        // 獲取盒子和按鈕
        var box = document.getElementById('box');
        var btn = document.getElementById('btn');
        // 給 按鈕 綁定一個單擊事件只要觸發了就執行這個匿名函數
            btn.onclick = function() {
                // 給盒子添加動畫 基類 和類名
                box.classList.add('animated','bounce');
        }
    </script>
</body>
</html>

jQuery添加動畫類示例：動畫

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 引入 animate.css -->
    <link rel="stylesheet" href="./css/animate.css">
    <!-- 引入 jquery.js -->
    <script src="./js//jquery3.4.1min.js"></script>
    <style>
        .box {
            position: relative;
            left: 78px;
            width: 200px;
            height: 200px;
            margin: 0 auto;
            background-color: pink;
        }
        button { display: block; margin: auto;}
    </style>
</head>
<body>
    <div class="box" id="box">盒子</div>
    <script>
       $(function() {
         var $this = $('#box');
            $this.hover(function() {
               $this.addClass('box animated bounce'); 
           },function() {
               $this.removeClass('animated bounce');
           })
       })
    </script>
</body>
</html>