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

演示地址 动画演示地址。

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

如何使用：

先来看一个简单的示例：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8.     <!-- 引入 animate.css -->
  9.     <link rel="stylesheet" href="./css/animate.css">
  10.     <style>
  11.         .box {
  12.             width: 200px;
  13.             height: 200px;
  14.             margin: 0 auto;
  15.             background-color: pink;
  16.         }
  17.     </style>
  18. </head>
  19. <body>
  20.     <!-- 打开浏览器就可以看到其效果了 -->
  21.     <div class="box animated bounce">盒子</div>
  22. </body>
  23. </html>

首先页面引入 animate.css。 把 animated 添加到类属性上， animated 是动画的一个基类每个动画都必须添加紧接着后面就是 动画名。 

 例如：

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

原生js添加动画示例：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8.     <!-- 引入 animate.css -->
  9.     <link rel="stylesheet" href="./css/animate.css">
  10.     <style>
  11.         .box {
  12.             position: relative;
  13.             left: 78px;
  14.             width: 200px;
  15.             height: 200px;
  16.             margin: 0 auto;
  17.             background-color: pink;
  18.         }
  19.         button { display: block; margin: auto;}
  20.     </style>
  21. </head>
  22. <body>
  23.     <div class="box" id="box">盒子</div>
  24.     <button id="btn">点我</button>
  25.     <script>
  26.         // 获取盒子和按钮
  27.         var box = document.getElementById('box');
  28.         var btn = document.getElementById('btn');
  29.         // 给 按钮 绑定一个单击事件只要触发了就执行这个匿名函数
  30.             btn.onclick = function() {
  31.                 // 给盒子添加动画 基类 和类名
  32.                 box.classList.add('animated','bounce');
  33.         }
  34.     </script>
  35. </body>
  36. </html>

jQuery添加动画类示例：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8.     <!-- 引入 animate.css -->
  9.     <link rel="stylesheet" href="./css/animate.css">
  10.     <!-- 引入 jquery.js -->
  11.     <script src="./js//jquery3.4.1min.js"></script>
  12.     <style>
  13.         .box {
  14.             position: relative;
  15.             left: 78px;
  16.             width: 200px;
  17.             height: 200px;
  18.             margin: 0 auto;
  19.             background-color: pink;
  20.         }
  21.         button { display: block; margin: auto;}
  22.     </style>
  23. </head>
  24. <body>
  25.     <div class="box" id="box">盒子</div>
  26.     <script>
  27.        $(function() {
  28.          var $this = $('#box');
  29.             $this.hover(function() {
  30.                $this.addClass('box animated bounce');
  31.            },function() {
  32.                $this.removeClass('animated bounce');
  33.            })
  34.        })
  35.     </script>
  36. </body>
  37. </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. C++经典面试算法题

    转自:http://blog.csdn.net/f_r_e_e_x/article/details/50770907 //1.实现strcpy. char* MyStrCpy( char *pDest ...

  2. php UTF8 转字节数组，后使用 MD5 计算摘要

    Hex.encodeHexString(md5.digest);按 UTF8 转字节数组,后使用 MD5 计算摘要,得到 16 字节数组,使用 Hex 转为长度为 32 的字符串,保持小写 bin2h ...

  3. 洛谷P1549 棋盘问题（2）

    P1549 棋盘问题(2) 题目描述 在N*N的棋盘上(1≤N≤10),填入1,2,…,N*N共N*N个数,使得任意两个相邻的数之和为素数. 例如:当N=2时,有: 其相邻数的和为素数的有: 1+2, ...

  4. IT兄弟连 JavaWeb教程 使用AJAX发送POST请求并获取响应

    POST请求用于向服务器发送应该被保存的数据,因此POST请求天然比GET请求多需要一份需要被保存的数据.那么这些数据应该放在何处呢?毕竟,我们的open()方法接收的三个参数都没有合适的位置. 答案 ...

  5. SpringBoot2.0 基础案例(09)：集成JPA持久层框架，简化数据库操作

    一.JAP框架简介 JPA(Java Persistence API)意即Java持久化API,是Sun官方在JDK5.0后提出的Java持久化规范.主要是为了简化持久层开发以及整合ORM技术,结束H ...

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

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

  7. transition动画最简使用方式

    HTML <a href="#" title="">test</a> CSS a {display:block; width:200px ...

  8. [題解]（水）luogu_P1372又是畢業季1

    被入門難度的題虐...... 作者: kkksc03 吉祥物 更新时间: 2013-07-14 19:00 在Ta的博客查看    78   By lzn 数论水题一道. 首先,若可能的最大公约数为a ...

  9. NET Core中使用Apworks

    NET Core中使用Apworks HAL,全称为Hypertext Application Language,它是一种简单的数据格式,它能以一种简单.统一的形式,在API中引入超链接特性,使得AP ...

  10. 牛客网Java刷题知识点之什么是异常、异常处理的原理是什么、为什么要使用异常、异常体系、运行时异常、普通异常、自定义异常、异常链

    不多说,直接上干货! 在这个世界不可能存在完美的东西,不管完美的思维有多么缜密,细心,我们都不可能考虑所有的因素,这就是所谓的智者千虑必有一失.同样的道理,计算机的世界也是不完美的,异常情况随时都会发 ...