插件描述：Animate.css内置了很多典型的css3动画，兼容性好使用方便。

Animate.css是一个有趣的，跨浏览器的css3动画库。很值得我们在项目中引用。

用法

1、首先引入animate css文件

1
2
3
<head>
  <link rel="stylesheet" href="animate.min.css">
</head>

2、给指定的元素加上指定的动画样式名

1
<div class="animated bounceOutLeft"></div>

这里包括两个class名，第一个是基本的，必须添加的样式名，任何想实现的元素都得添加这个。第二个是指定的动画样式名。

3、如果说想给某个元素动态添加动画样式，可以通过jquery来实现：

1
$('#yourElement').addClass('animated bounceOutLeft');

4、当动画效果执行完成后还可以通过以下代码添加事件

1
$('#yourElement').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', doSomething);

你也可以通过 JavaScript 或 jQuery 给元素添加这些 class，比如：

1
2
3
$(function(){
    $('#jq22').addClass('animated bounce');
});

有些动画效果最后会让元素不可见，比如淡出、向左滑动等等，可能你又需要将 class 删除，比如：

1
2
3
4
5
6
$(function(){
    $('#jq22').addClass('animated bounce');
    setTimeout(function(){
        $('#jq22').removeClass('bounce');
    }, 1000);
});

animate.css 的默认设置也许有些时候并不是我们想要的，所以你可以重新设置，比如：

1
2
3
4
5
#jq22{
    animate-duration: 2s;    //动画持续时间
    animate-delay: 1s;    //动画延迟时间
    animate-iteration-count: 2;    //动画执行次数
}

所有的动画样式名请参见demo页面。

Animate.css_css3动画库介绍的更多相关文章

  1. 048——VUE中使用animate.css动画库控制vue.js过渡效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. 基于animate.css动画库的全屏滚动小插件，适用于vue.js(移动端、pc)项目

    功能简介 基于animate.css动画库的全屏滚动,适用于vue.js(移动端.pc)项目. 安装 npm install vue-animate-fullpage --save 使用 main.j ...

  3. css3动画和animate.css动画库使用

    CSS3动画 css3动画可以分为两种.transition过渡动画和keyframes关键帧动画 过渡动画 第一种叫过渡(transition)动画,就是从初始状态过渡到结束状态这个过程中所产生的动 ...

  4. （生产）animate.css 动画库

    官网:https://daneden.github.io/animate.css/ Animate.css是一个有趣的,跨浏览器的css3动画库 用法 首先引入animate css文件:    &l ...

  5. Animate.css动画库，简单的使用，以及源码剖析

    animate.css是什么?能做些什么? animate.css是一个css动画库,使用它可以很方便的快捷的实现,我们想要的动画效果,而省去了操作js的麻烦.同时呢,它也是一个开源的库,在GitHu ...

  6. 让动画不再僵硬：Facebook Rebound Android动画库介绍

    introduction official site:http://facebook.github.io/reboundgithub : https://github.com/facebook/reb ...

  7. vue中使用animate.css动画库

    1.安装: npm install animate.css --save 2.引入及使用: //main.js中 import animated from 'animate.css' Vue.use( ...

  8. Facebook Rebound 弹性动画库 源码分析

    Rebound源码分析 让动画不再僵硬:Facebook Rebound Android动画库介绍一文中介绍了rebound这个库. 对于想体验一下rebound的效果,又懒得clone和编译代码的, ...

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

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

随机推荐

  1. Javaweb中利用kaptcha生成验证码

    引入kaptcha-2.3-jdk15.jar包 在web.xml中进行配置 <servlet> <servlet-name>Kaptcha</servlet-name& ...

  2. C - Soldier and Cards

    Time Limit:2000MS     Memory Limit:262144KB     64bit IO Format:%I64d & %I64u Description Two bo ...

  3. 遗传算法求解TSP问题

    package com.louis.tsp; /** * Project Name:GeneticAlgorithm * File Name:Individual.java * Package Nam ...

  4. teamviewer被识别为商业用途

    1.卸载teamviewer,在控制面板里或者用360等软件卸载: 2.删除下面两个目录 C:\Program Files (x86)\TeamViewer C:\Users\Administrato ...

  5. 洛谷 - P2774 - 方格取数问题 - 二分图最大独立点集 - 最小割

    https://www.luogu.org/problemnew/show/P2774 把两个相邻的节点连边,这些边就是要方便最小割割断其他边存在的,容量无穷. 这种类似的问题的话,把二分图的一部分( ...

  6. PTA 螺旋方阵

    所谓"螺旋方阵",是指对任意给定的NNN,将1到N×NN\times NN×N的数字从左上角第1个格子开始,按顺时针螺旋方向顺序填入N×NN\times NN×N的方阵里.本题要求 ...

  7. Codeforces Round #355 (Div. 2) B. Vanya and Food Processor

    菜菜菜!!!这么撒比的模拟题,听厂长在一边比比比了半天,自己想一想,然后纯模拟一下,中间过程检测一下,妥妥的就可以过. 题意:有N个东西要去搞碎,每个东西有一个高度,然后有一台机器支持里面可以达到的最 ...

  8. CF1045G AI robots（动态开点线段树）

    题意 火星上有$N$个机器人排成一行,第$i$个机器人的位置为$x_{i}$,视野为$r_{i}$,智商为$q_{i}$.我们认为第$i$个机器人可以看到的位置是$[x_{i}-r_{i},x_{i} ...

  9. .NET Core 跨平台物联网开发：设置委托事件(二)

    系列教程目录 (一) 连接阿里云IOT (二) 设置委托事件 (三) 上报属性 (四)  SDK文档 属性.方法.委托.类 http://pan.whuanle.cn/index.php?dir=up ...

  10. PJzhang:微信公众号短连接与微信好友验证

    猫宁!!! 参考链接:https://mp.weixin.qq.com/s/LPuYrDEyEXHyhcK3_HokSg 之前看到他们有人把微信公众号文章的长链接转为短链接,很受用,百度搜索一下方法, ...