官网：https://daneden.github.io/animate.css/

animate.css 是一款跨浏览器的动画库。

使用方式：

  1. 在页面的 <head>中引入样式文件：

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

  2. 给你想要添加动画效果的元素加上 animated 样式，如果想要动画循环执行的话，你需要加上 infinite 样式。

  3. 具体样式在官网一一列举出来啦，而且可以直接查看效果，很炫酷啊！

例子：

<h1 class="animated infinite bounce">Example</h1>

当你将 animate.css 与 jQuery 一起使用或者添加你自己的 CSS 规则时， 你可以用 animate.css 做一大堆其他的事，使用 jQuery 动态添加动画：

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

你也可以检测一个动画是否结束了：

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

注意： jQuery.one() 用在你希望只执行事件一次 的时候。

你可以改变动画的持续时间，添加延迟或改变它执行的次数：

#yourElement {

  -vendor-animation-duration: 3s;

  -vendor-animation-delay: 2s;

  -vendor-animation-iteration-count: infinite;

}

注意：确保用供应商的前缀（webkit, moz, 等等）来替换上面CSS中的 vendor

Animate.css(一款有意思的CSS3动画库)的更多相关文章

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

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

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

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

  3. Animate.css 一款强大的预设css3动画库

    Animate.css是一个有趣的,跨浏览器的css3动画库.很值得我们在项目中引用. 用法 1.首先引入animate css文件 <head> <link rel="s ...

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

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

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

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

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

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

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

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

  8. Css3动画库收集

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

  9. CSS3 -- 动画库

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

随机推荐

  1. PyCharm默认文件头部的设置

    PyCharm的设置 1.设置默认的文件头: 找到该路径并添加以下信息 File->settings->Editor->File and Code Templates->Pyt ...

  2. debug，菜鸟必备的求生技能

    突然想写个关于 debug 的文章,来纪念我2天前被自己坑的蠢事…… 前两天,项目的四期送去电科院审查了.因为一些不可描述的原因,我很不喜欢四期.做起来就很烦~临近验收,发现了个比较严重的bug,记录 ...

  3. Maven学习 四 Eclipse与Maven结合的配置

    本问承接Maven学习 三 第一步:配置本地仓库 (1)默认配置 查看 本地仓库的位置是在一个叫做setting.xml的配置文件中设置,如果我们不配置,会使用开发工具自己集成的一个setting.x ...

  4. SpringMVC 学习 十一 springMVC控制器向jsp或者别的控制器传递参数的四种方法

    以后的开发,大部分是发送ajax,因此这四种传递参数的方法,并不太常用.作为了解吧 第一种:使用原生 Servlet 在控制器的响应的方法中添加Servlet中的一些作用域:HttpRequestSe ...

  5. Java集合：ConcurrentHashMap原理分析

    集合是编程中最常用的数据结构.而谈到并发,几乎总是离不开集合这类高级数据结构的支持.比如两个线程需要同时访问一个中间临界区(Queue),比如常会用缓存作为外部文件的副本(HashMap).这篇文章主 ...

  6. # 2019-2020-3 《Java 程序设计》实验一：Java开发环境的熟悉

    2019-2020-3 <Java 程序设计>实验一:Java开发环境的熟悉-------1 一.实验要求: 1 建立"自己学号exp1"的目录 2 在"自己 ...

  7. john and hydra using de-ice1.100

    配置IP  ipconfig etho 192.168.179.111 http://192.168.179.111/index2.php curl http://192.168.179.111/in ...

  8. Codeforces 1114 简要题解

    文章目录 A题 B题 C题 D题 E题 F题 传送门 然而这场div2div2div2没有什么难度比较大的题 A题 传送门 题意简述:三个人分别至少选x,y,zx,y,zx,y,z件物品,有三种物品数 ...

  9. ABP框架系列之四十三：(OData-Integration-OData集成)

    Introduction OData is defined as "An open protocol to allow the creation and consumption of que ...

  10. VS2015离线安装NuGet Package

    在一些情况下,VS2015直接安装NuGet Package的时候,速度异常缓慢: 所以还是考虑直接离线安装: Step1: 下载相应的Package https://www.nuget.org/ 然 ...