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

用法

1、首先引入animate css文件

<head>

  <link rel="stylesheet" href="animate.min.css">

</head>

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

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

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

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

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

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

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

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

$(function(){

    $('#jq22').addClass('animated bounce');

});

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

$(function(){

    $('#jq22').addClass('animated bounce');

    setTimeout(function(){

        $('#jq22').removeClass('bounce');

    }, 1000);

});

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

#jq22{

    animate-duration: 2s;    //动画持续时间

    animate-delay: 1s;    //动画延迟时间

    animate-iteration-count: 2;    //动画执行次数

}

转载自：http://www.jq22.com/jquery-info819

Animate.css 一款强大的预设css3动画库的更多相关文章

  1. Animate.css 一款牛逼的css3动画库

    Animate.css是一款很牛逼的,跨浏览器的css3动画库,使用方法也很简单只要引入一个animate.min.css就可以了, 简单使用 1 首先引入 animate的 css 文件样式 cdn ...

  2. animate.css – 齐全的CSS3动画库

    animate.css – 齐全的CSS3动画库 演 示 下 载   简介 animate.css 是一个来自国外的 CSS3 动画库,它预设了抖动(shake).闪烁(flash).弹跳(bounc ...

  3. animate.css –齐全的CSS3动画库--- 学习笔记

    animate.css – 齐全的CSS3动画库 学习网站: https://daneden.github.io/animate.css/ http://www.dowebok.com/98.html ...

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

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

  5. 腾讯开源的轻量级CSS3动画库：JX.Animate

          JX.Animate 是由腾讯前端团队 AlloyTeam 推出的一个 CSS3 动画库,通过 JX(腾讯的前端框架)插件的形式提供. Why CSS3 众所周知在支持HTML5的浏览器中 ...

  6. CSS3 Animation Cheat Sheet：实用的 CSS3 动画库

    CSS3 Animation Cheat Sheet 是一组预设的动画库,为您的 Web 项目添加各种很炫的动画.所有你需要做的是添加样式表到你的网站,为你想要添加动画效果的元素应用预制的 CSS 类 ...

  7. Css3动画库收集

    1.animate.css – 齐全的CSS3动画库 http://www.dowebok.com/98.html 2.Angular官方动画库 http://augus.github.io/ngAn ...

  8. CSS3 -- 动画库

    http://www.jq22.com/yanshi819 文件结构: html <!DOCTYPE html> <html lang="zh-CN"> & ...

  9. Animate.css(一款有意思的CSS3动画库)

    官网:https://daneden.github.io/animate.css/ animate.css 是一款跨浏览器的动画库. 使用方式: 在页面的 <head>中引入样式文件: & ...

随机推荐

  1. yeoman 介绍、安装 和 使用

    一.介绍.安装 1, 是什么 Yeoman其实是3个工具的总和: ü  yo --- 脚手架,自动生成工具 ü  Grunt.gulp --- 构建工具 (最初只有grunt,后面gulp火了添加进来 ...

  2. PHP开发-模板的使用

    通过今天晚上半个多小时的赵老师对模板的介绍,大致对模板的使用.结构以及开发模板的思想有了个大致的了解. 为什么要开发模板:模板就是将PHP发过过程中使用到.需要操作的事物封装成对象.以便在使用到的时候 ...

  3. 吴裕雄--天生自然C++语言学习笔记：C++ 标准库

    C++ 标准库可以分为两部分: 标准函数库: 这个库是由通用的.独立的.不属于任何类的函数组成的.函数库继承自 C 语言. 面向对象类库: 这个库是类及其相关函数的集合. C++ 标准库包含了所有的 ...

  4. mysql多表关联更新

    update 表A inner join 表B on 表A.关联字段 = 表B.关联字段 set 表a.待更新字段01 = 表B.字段01 , 表a.待更新字段021 = 表B.字段02 where ...

  5. 【LeetCode】四数之和

    [问题]给定一个包含 n 个整数的数组 nums 和一个目标值 target,判断 nums 中是否存在四个元素 a,b,c 和 d ,使得 a + b + c + d 的值与 target 相等?找 ...

  6. 【LeetCode】验证二叉搜索树

    [问题]给定一个二叉树,判断其是否是一个有效的二叉搜索树. 假设一个二叉搜索树具有如下特征:节点的左子树只包含小于当前节点的数.节点的右子树只包含大于当前节点的数.所有左子树和右子树自身必须也是二叉搜 ...

  7. sql server 日期时间数据类型

    1.日期和时间数据类型 (1)在sqlserver 2008之前,SQL Server 支持datetime 和 smalldatetime 两种日期时间数据类型.这两种数据类型日期和时间是不可分割的 ...

  8. 使用Redis SortedSet实现增量更新

    导读:前段时间有个需求是提供一个接口供客户端增量更新数据,当有数据被删除了以后客户端也需要感知到,并且要支持一定并发: 关键词:高并发,增量更新 前言 何谓增量更新,顾名思义就是只更新变化的部分,这样 ...

  9. soap调用Jar包冲突，SOAPMessageContext

    ================================ ©Copyright 蕃薯耀 2020-01-07 https://www.cnblogs.com/fanshuyao/ soap调用 ...

  10. 安装swoole redis异步 hiredis swoole扩展加载失败 或者不显示问题 解决办法

    当前办法仅供参考 贴上报错 找了好久 根据网上办法也试了 没解决 最后 仔细读问题 觉得可能是 hiredis路径问题 终于解决了 解决办法: 进入你的安装包目录然后执行下面 mkdir /usr/l ...