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. xampp搭建discuz论坛

    xampp搭建discuz论坛 软件相关 xampp 下载 1.下载xampp,地址 2.下载discuz,地址 配置 1.安装xampp并启动apache和mysql 2.将discuz安装包中的u ...

  2. jenkins 找不到mvn 命令

    错误如下: /data/jenkins/temp/hudson9132559581388971644.sh: line 4: mvn: command not found 方法如下: 1  修改环境变 ...

  3. Node-SASS安装

    鉴于国内的环境,node-sass实在是太难安装了,可以直接通过淘宝的npm镜像来安装. 1.安装cnpm(https://npm.taobao.org/) npm install -g cnpm - ...

  4. [Xcode 实际操作]六、媒体与动画-(3)使用CoreImage框架设置图片的单色效果

    目录:[Swift]Xcode实际操作 本文将演示如何使用图片框架,将图片转换成单色样式. 在项目导航区,打开视图控制器的代码文件[ViewController.swift] import UIKit ...

  5. CODING 告诉你硅谷的研发项目管理之道（5）

    CODING 已经通过前四期文章,让大家逐步了解了一些硅谷优秀的项目管理者是如何工作.如何维持团队高效运作的.在过去的十几年中,中国的互联网行业发展过于迅猛,导致很多管理人员都是赶鸭子上架,商场如战场 ...

  6. java基础第十一篇之Date、Math、自动装箱和拆箱

    Date类 表示一个瞬间,就是一个时刻 * * 构造方法: * public Date();//创建一个表示当前系统时间的Date对象 * public Date(long time);//毫秒值,距 ...

  7. Luogu P2341 [HAOI2006]受欢迎的牛 SCC缩点

    把强连通分量缩点,如果有且仅有一个出度为0的强连通分量,那么答案就是他的size:如果有多个入度为0的,那么没有明星牛. #include<cstdio> #include<iost ...

  8. TPU的相关资料

    1.谷歌 TPU 的强大与局限:TPU/GPU/CPU性能功耗全面对比:http://www.sohu.com/a/134315786_473283 2.谷歌发布TPU论文,75位联合作者,GPU迎来 ...

  9. mysql主给备赋予权限时报错，MySQL [Err] 1055 - Expression #1 of ORDER BY clause is not in GROUP BY clause

    https://www.cnblogs.com/skymyyang/p/7551646.html 在my.cnf 里面设置sql_mode='STRICT_TRANS_TABLES,NO_ZERO_I ...

  10. c#基础值类和引用类型_字符串

    值类型和引用类型区别:1.值类型和引用类型在内存上存储的地方不一样.2.在传递值类型和传递引用类型的时候,传递的方式不一样.值类型我们称之为值传递,引用类型我们称之为引用传递.我们学的值类型和引用类型 ...