官网：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. 1-JRE与JDK等知识

  2. Java：foreach实现原理

    第一部分: For-each Loop Purpose The basic for loop was extended in Java5 to make iteration over arrays a ...

  3. ABP框架系列之十九：(Debugging-调试)

    While it's not generally needed, you may want to step into ABP's source code while you debugging you ...

  4. PowerShell工作流学习-4-工作流中重启计算机

    关键点: a)工作流中重新启动计算机,请使用Restart-Computer的Wait参数,Wait参数不仅适用于本地计算机,也适用于远程计算机. b)重启运行工作流的计算机,手工恢复请使用Resum ...

  5. JVM自动内存管理机制——Java内存区域（上）

    一.JVM运行时数据区域概述 Java相比较于C/C++的一个特点就是,在虚拟机自动内存管理机制的帮助下,我们不需要为每一个操作都写像C/C++一样的delete/free代码,所以也不容易出现内存泄 ...

  6. 动态页面技术EL

    1.EL概述: EL表达式可以嵌入再JSP页面内部,减少JSP脚本的编写 EL出现的目的是要替代JSP页面中脚本的编写 EL最重要的作用就是从域中取出数据: 引入: JSP中<%=request ...

  7. 闲话ajax，例ajax轮询，ajax上传文件[开发篇]

    引语:ajax这门技术早已见怪不怪了,我本人也只是就自己真实的经验去总结一些不足道的话.供不是特别了解的朋友参考参考! 本来早就想写一篇关于ajax的文章的,但是前段时间一直很忙,就搁置了,趁着元旦放 ...

  8. Linux 环境下使用g++编译C++

    单个源文件生成可执行程序 下面是一个保存在文件 helloworld.cpp 中一个简单的 C++ 程序的代码: /* helloworld.cpp */ #include <iostream& ...

  9. python常用模块os和sys

    一.os模块 说明:os模块是对操作系统进行调用的接口 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 os. ...

  10. 国外青少年最喜爱的聊天 app，竟然是 Google Docs

    简评: 这还真不是标题党,Google Docs 的协作中内置了实时聊天的功能,也可以进行 comments,颇有种现代「传纸条」的既视感.其实国内的石墨文档.腾讯文档等协作工具也有类似的效果,本文很 ...