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. nodejs安装使用express

    1.用Express 应用程序生成器 express-generator 快速搭建express框架 1.1安装: npm install express-generator -g 1.2 生成目录: ...

  2. Oracle判断某个表是否存在的方法

    在SQL中,我们常常使用if exists来判断一个表或某个对象是否存在,例如:  IF EXISTS (SELECT * FROM sys.tables WHERE name = 'CODE_BMD ...

  3. springCloud学习总览

      写完最后一篇特意去看了看第一篇是什么时候写的---2018/11/19,到现在三个月多一点,总的来说这三个月通过<Spring 微服务实战>这本书,算是对微服务进行了一次扫盲学习.   ...

  4. VM Fusion配置静态IP和物理机通讯

    Vm虚拟机在WIndow系统上和物理机进行通讯很方便,但是在Mac上简直跟吃了屎一样难用的要死,物理机断了网以后还不能和虚拟机通讯, 如果在windows上做开发,也是简直和吃了屎一样,难用的要屎,这 ...

  5. python-django框架中使用FastDFS分布式文件系统

    一.安装FastDFS 1-1:执行docker命令安装 # 安装tracker docker run -dti --network=host --name tracker -v /var/fdfs/ ...

  6. 用户唯一性验证（ajax）

    验证用户添加或者修改时用户名的唯一性: 验证时机:用户名改变时,表单提交时. 1.jsp页面:(前端) <%@ page contentType="text/html;charset= ...

  7. 01分数规划初探？！By cellur925

    都要\(NOIp\)了为啥我还在看这种玄学玩意..... \(01\)分数规划:这是一个问题模型\(qwq\),一般是在求\[\frac{\sum_{i=1}^{n} a_i*x_i}{\sum_{i ...

  8. HttpClient 应用案例揭破应用Discuss论坛登录

    闲来无事,写了一个对discuss论坛登录的案例,初次上场按照以前的惯例没成功,见过抓包分析discuss论坛成功完成,废话不多说 直接上代码. 1:winform 做客户端,添加HttpClient ...

  9. Django之缓存+序列化+信号+ORM性能优化+验证码

    缓存 由于Django是动态网站,所有每次请求均会去数据进行相应的操作,当程序访问量大时,耗时必然会更加 明显,最简单解决方式是使用:缓存,缓存将一个某个views的返回值保存至内存或者memcach ...

  10. Codeforces 161C（分治、性质）

    要点 因为当前最大字符只有一个且两边是回文的,所以如果答案包含最大字符则一定是重合部分. 若不包含,则用此字符将两个区间分别断为两部分,则共有四种组合,答案一定为其中之一. #include < ...