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. 多版本Shader与multi_compile

    多版本Shader与multi_compile   https://docs.unity3d.com/Manual/SL-MultipleProgramVariants.html   #pragma ...

  2. poj 2049（二分+spfa判负环）

    poj 2049(二分+spfa判负环) 给你一堆字符串,若字符串x的后两个字符和y的前两个字符相连,那么x可向y连边.问字符串环的平均最小值是多少.1 ≤ n ≤ 100000,有多组数据. 首先根 ...

  3. js原型和构造函数

    前言 从应用层面深入理解原型模式和js中的构造函数. 构造函数(constructor) js中的任何对象都有自己的构造函数.js中使用字面量声明的普通对象({})或数组([])等子对象本质上都是使用 ...

  4. 两数之和LeetCode

    给定一个整数数组 nums 和一个目标值 target,请你在该数组中找出和为目标值的那 两个 整数,并返回他们的数组下标. 你可以假设每种输入只会对应一个答案.但是,你不能重复利用这个数组中同样的元 ...

  5. C 语言实例 - 斐波那契数列

    C 语言实例 - 斐波那契数列 斐波那契数列指的是这样一个数列 , , , , , , , , , , , , ,,,,,,,,,,,........ 这个数列从第3项开始,每一项都等于前两项之和. ...

  6. git push error: ! [rejected] failed to push some refs to . . .

    报错情况: 报错原因:远程库与本地库不一致造成的,需要把远程库同步到本地库! 解决办法: git pull --rebase origin master 这条指令是将远程库中的更新合并到本地库,--r ...

  7. thinkphp5部署到LAMP服务器显示Access denied.

    问题:thinkphp5部署到LAMP服务器,首页正常访问,其余页面访问显示Access denied 解决:1.先把文件夹权限改为777 2. 进入服务器,改文件.将php.ini的值改成1

  8. UML工具 PlantUML SequenceDiagram

  9. 译—— a tale of viewport2

    这一页我们将讨论移动浏览器.如果您对移动设备完全陌生,我建议您首先阅读第一部分关于桌面浏览器的内容,以便在熟悉的环境中做好准备. 移动浏览器的问题 移动浏览器和桌面浏览器比较,最明显的差异是屏幕大小. ...

  10. Web自动化测试—PO设计模式（二）

    PO设计模式要点一:页面类都继承于BasePage 目录结构 ui_auto_test --src --pages --__init__.py --base_page.py --login_page. ...