animate.css是一个CSS3动画库，里面预设了抖动(shake)、闪烁(flash)、弹跳(bounce)、翻转(flip)、旋转(rotateIn/rotateOut)、淡入淡出(fadeIn/fadeOut)等多达 60 多种动画效果。你可以点击打开它的 官网  查看演示，里面几乎包含了所有常见的动画效果。妈妈在也不用担心我不会写动画了！！！

演示地址 动画演示地址。

下载地址链接 点击下载地址链接下载，打开的是一个css文件 直接Ctrl+A全选 Ctrl+C复制即可。

如何使用：

先来看一个简单的示例：

<!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 是动画的一个基类每个动画都必须添加紧接着后面就是 动画名。 

 例如：

<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>

至于动画其他的配置参数，如动画持续时间,动画的执行次数等等，你可以在你的的元素上自行定义，覆盖掉animate.css里面所定义的就好了。

如何使用动画库animate.css的更多相关文章

  1. 强大的CSS3动画库animate.css

    今天要给大家介绍一款强大的CSS3动画库animate.css,animate.css定义了大概50多种动画形式,包括淡入淡出,文字飞入.左右摇摆动画等等.使用animate.css也非常简单,你可以 ...

  2. css3动画简介以及动画库animate.css的使用

    在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工.美你妹啊,请叫我前端工程师好不好.呃..好吧,攻城尸...呵呵,作为一个攻城尸,没有点高端大气上档次的东西怎么能行呢,那么css3 ...

  3. 转: css3动画简介以及动画库animate.css的使用

    ~~~ transition  animation 和 animate.css 在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工.美你妹啊,请叫我前端工程师好不好.呃..好吧,攻城 ...

  4. 【转载】css3动画简介以及动画库animate.css的使用

    原文地址:http://www.cnblogs.com/2050/p/3409129.html 在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工.美你妹啊,请叫我前端工程师好不好. ...

  5. 动画库animate.css的用法

    简介 animate.css是一个来自国外的 CSS3 动画库,它预设了引起弹跳(bounce).摇摆(swing).颤抖(wobble).抖动(shake).闪烁(flash).翻转(flip).旋 ...

  6. CSS动画库——animate.css的使用

    Animate.css是一款强大的CSS3动画库 官网地址:https://daneden.github.io/animate.css/ 使用方法如下所示: (1)下载animate.css 下载地址 ...

  7. 使用CSS3动画库animate.css

    IE9及更早版本的IE浏览器都不支持css3动画 谷歌浏览器.火狐浏览器.IE10+浏览器以及移动端浏览器等这些都支持css3动画 animate.css内置了很多典型的css3动画   用法   1 ...

  8. 动画库Animate.css

    笔记分享: 用法:到官网(http://daneden.github.io/animate.css/),下载animate.min.css文件.点击这里 1.首先引入animate css文件 < ...

  9. CSS3动画库——animate.css

    初见animate.css的时候,感觉很棒,基本上很多常用的CSS3动画效果都帮我们写好了,所以想要哪一种效果直接就可以拿过来用,甚是方便: 效果展示官网:http://daneden.github. ...

随机推荐

  1. SCUT - 12 - 西方国家 - 矩阵快速幂

    https://scut.online/p/12 可以用矩阵快速幂来做. #include<bits/stdc++.h> using namespace std; typedef long ...

  2. js混杂笔记

    1.判断对象为空的方法 1)Object.keys({}).length === 0 // true 2)Object.getOwnPropertyNames({}).length === 0 // ...

  3. [UE4]用C++如何创建Box Collision

    http://www.dawnarc.com/2016/08/ue4%E7%94%A8c--%E5%A6%82%E4%BD%95%E5%88%9B%E5%BB%BAbox-collision/ 在蓝图 ...

  4. Python学习笔记(异常处理)

    用户输入了一个不合规定的值,或者需要打开的文件不存在.这些情况被称作“异常”,一个好的程序需要能处理可能发生的异常,避免程序因此而中断. 例如我们去打开一个文件: f = file('non-exis ...

  5. jsp学习与提高（五）——JSP 异常处理

    JSP 异常处理 当编写JSP程序的时候,程序员可能会遗漏一些BUG,这些BUG可能会出现在程序的任何地方.JSP代码中通常有以下几类异常: 检查型异常:检查型异常就是一个典型的用户错误或者一个程序员 ...

  6. jQuery EasyUI/TopJUI创建树形表格下拉框

    jQuery EasyUI/TopJUI创建树形表格下拉框 第一种方法(纯HTML创建) <div class="topjui-row"> <div class= ...

  7. JDK12下的ArrayList源码解读 与 Vector的对比

    ArrayList源码阅读. //测试代码实现如下 private static void arrayList() { ArrayList<String> list = new Array ...

  8. SVN Trunk Tag Branch

    http://blog.csdn.net/vbirdbest/article/details/51122637

  9. JS高级学习历程-11

    [继承] 在php,一个类去继承另一个类,本类实例化出来的对象,既可以调用本身类的成员,也可以调用父类的成员. 在javascript继承主要通过原型实现,构造函数继承一个对象,构造函数的实例会拥有被 ...

  10. shell编程 条件判断式----利用 if .... then ----多重

    条件判断式----利用 if .... then ----多重 在同一个数据的判断中,如果该数据需要进行多种不同的判断时,应该怎么作?举例来说,上面的 sh06.sh 脚本中,我们只要进行一次 $yn ...