地址为：http://daneden.github.io/animate.css/

源码地址为:https://github.com/daneden/animate.css

简单的使用方法：

Animate.css

Just-add-water CSS animation

animate.css is a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness.

Basic Usage

  1. Include the stylesheet on your document's <head>

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

  2. Add the class animated to the element you want to animate. You may also want to include the classinfinite for an infinite loop.

  3. Finally you need to add one of the following classes:

    • bounce
    • flash
    • pulse
    • rubberBand
    • shake
    • swing
    • tada
    • wobble
    • jello
    • bounceIn
    • bounceInDown
    • bounceInLeft
    • bounceInRight
    • bounceInUp
    • bounceOut
    • bounceOutDown
    • bounceOutLeft
    • bounceOutRight
    • bounceOutUp
    • fadeIn
    • fadeInDown
    • fadeInDownBig
    • fadeInLeft
    • fadeInLeftBig
    • fadeInRight
    • fadeInRightBig
    • fadeInUp
    • fadeInUpBig
    • fadeOut
    • fadeOutDown
    • fadeOutDownBig
    • fadeOutLeft
    • fadeOutLeftBig
    • fadeOutRight
    • fadeOutRightBig
    • fadeOutUp
    • fadeOutUpBig
    • flipInX
    • flipInY
    • flipOutX
    • flipOutY
    • lightSpeedIn
    • lightSpeedOut
    • rotateIn
    • rotateInDownLeft
    • rotateInDownRight
    • rotateInUpLeft
    • rotateInUpRight
    • rotateOut
    • rotateOutDownLeft
    • rotateOutDownRight
    • rotateOutUpLeft
    • rotateOutUpRight
    • hinge
    • rollIn
    • rollOut
    • zoomIn
    • zoomInDown
    • zoomInLeft
    • zoomInRight
    • zoomInUp
    • zoomOut
    • zoomOutDown
    • zoomOutLeft
    • zoomOutRight
    • zoomOutUp
    • slideInDown
    • slideInLeft
    • slideInRight
    • slideInUp
    • slideOutDown
    • slideOutLeft
    • slideOutRight
    • slideOutUp

Full example:

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

Usage

To use animate.css in your website, simply drop the stylesheet into your document's <head>, and add the class animated to an element, along with any of the animation names. That's it! You've got a CSS animated element. Super!

<head>

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

</head>

You can do a whole bunch of other stuff with animate.css when you combine it with jQuery or add your own CSS rules. Dynamically add animations using jQuery with ease:

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

You can also detect when an animation ends:

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

View a video tutorial on how to use Animate.css with jQuery here.

Note: jQuery.one() is used when you want to execute the event handler at most once. More informationhere.

You can change the duration of your animations, add a delay or change the number of times that it plays:

#yourElement {

  -vendor-animation-duration: 3s;

  -vendor-animation-delay: 2s;

  -vendor-animation-iteration-count: infinite;

}

Note: be sure to replace "vendor" in the CSS with the applicable vendor prefixes (webkit, moz, etc)

Custom Builds

Animate.css is powered by Grunt, and you can create custom builds pretty easily. First of all, you’ll need Grunt and all other dependencies:

$ cd path/to/animate.css/

$ sudo npm install

Next, run grunt watch to watch for changes and compile your custom builds. For example, if you want only some of the the “attention seekers”, simply edit the animate-config.json file to select only the animations you want to use.

"attention_seekers": {

  "bounce": true,

  "flash": false,

  "pulse": false,

  "shake": true,

  "swing": true,

  "tada": true,

  "wobble": true,

  "jello":true

}

https://github.com/daneden/animate.css

css 动画类库Animate.css的更多相关文章

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

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

  2. 微信网页动画---swiper.animate.css

    项目需要,自己写了个demo <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...

  3. 动画利器animate.css

    使用过CSS3编写动画的同学一定感叹CSS3的强大,但是也会感到书写的麻烦.每次都要计算动画的各个参数,十分麻烦.有没有一个库能封装一些常用的CSS3动画效果.答案是肯定的,animate.css就是 ...

  4. CSS动画框架Loaders.css +animate.css

    CSS加载动画框架Loaders.css 是一款非常出色的加载动画框架,Loaders.css利用纯CSS可以实现很多种样式的Loading加载动画,这些动画并不需要图片来辅助,而是仅仅需要CSS即可 ...

  5. CSS3动画框架 Animate.css

    CSS3的动画应用越来越多了,Animate.css一个从名字上就知道干什么的动画框架. github上的访问地址:http://daneden.github.io/animate.css/ 使用方法 ...

  6. vue 动画框架Animate.css @keyframes

    <script src="vue.js"></script> <link rel="stylesheet" href=" ...

  7. CSS动画库——animate.css的使用

    Animate.css是一款强大的CSS3动画库 官网地址:https://daneden.github.io/animate.css/ 使用方法如下所示: (1)下载animate.css 下载地址 ...

  8. CSS--使用Animate.css制作动画效果

    一 使用Animate.css动画 // 通过@import引入外部CSS资源; // 引入线上图片及JS文件; // 通过更改CSS类名生成不同类型的CSS3动画;   <!DOCTYPE h ...

  9. css3动画简介以及动画库animate.css的使用

    在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工.美你妹啊,请叫我前端工程师好不好.呃..好吧,攻城尸...呵呵,作为一个攻城尸,没有点高端大气上档次的东西怎么能行呢,那么css3 ...

随机推荐

  1. Maven Build profiles

    They modify the POM at build time, and are meant to be used in complementary sets to give equivalent ...

  2. IE6-8支持css3属性

    方法一.让IE6-8支持css3属性 <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shi ...

  3. android:windowSoftInputMode及其他部分属性用法

    本文来自http://blog.csdn.net/liuxian13183/ ,引用必须注明出处! 今天我们来讲讲android:windoSoftInputMode的用法,许多同学会为软键盘的弹出. ...

  4. DIV+CSS设计IE6浮动产生双倍距离

    <!doctype html><html><head> <meta name="Keywords" content="" ...

  5. JQuery事件手册

    blur.focus     blur失去焦点:focus获得焦点 load 当指定的元素(及子元素)已加载时,会发生 load() 事件 resize 当调整浏览器窗口的大小时,发生 resize ...

  6. LeetCode Find the Duplicate Number 找重复出现的数（技巧）

    题意: 有一个含有n+1个元素的数组,元素值是在1-n之间的整数,请找出其中出现超过1次的数.(保证仅有1个出现次数是超过1的数) 思路: 方法一:O(nlogn).根据鸽笼原理及题意,每次如果< ...

  7. MyBatis对应的xml的数据类型

    MyBatis对应的xml的数据类型 JDBC Type Java TypeCHAR StringVARCHAR StringLONGVARCHAR StringNUMERIC java.math.B ...

  8. android studio 中怎么使用adb无线调试

    之前再eclipse下进行安卓开发,但谷歌却抛弃了eclipse而力挺android studio开发环境,没办法只好跟着走. 在eclipse下开发时调试用adb无线方式特别方便,但是在androi ...

  9. 如何用 freebayes call SNP

    1,软件介绍 FreeBayes is a Bayesian genetic variant detector designed to find small polymorphisms, specif ...

  10. 代码管理工具TortoiseSVN

    . TortoiseSVN TortoiseSVN与Windows Explorer集成可称为是一款功能齐全的SVN客户端,允许你管理SVN项目.其自身就包含客户端无需再安装额外的SVN客户端.它还提 ...