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

Include the stylesheet on your document's <head>

<head>

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

</head>

Add the class animated to the element you want to animate. You may also want to include the classinfinite for an infinite loop.
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的更多相关文章

css3动画和animate.css动画库使用
CSS3动画 css3动画可以分为两种.transition过渡动画和keyframes关键帧动画过渡动画第一种叫过渡(transition)动画,就是从初始状态过渡到结束状态这个过程中所产生的动 ...
微信网页动画---swiper.animate.css
项目需要,自己写了个demo <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...
动画利器animate.css
使用过CSS3编写动画的同学一定感叹CSS3的强大,但是也会感到书写的麻烦.每次都要计算动画的各个参数,十分麻烦.有没有一个库能封装一些常用的CSS3动画效果.答案是肯定的,animate.css就是 ...
CSS动画框架Loaders.css +animate.css
CSS加载动画框架Loaders.css 是一款非常出色的加载动画框架,Loaders.css利用纯CSS可以实现很多种样式的Loading加载动画,这些动画并不需要图片来辅助,而是仅仅需要CSS即可 ...
CSS3动画框架 Animate.css
CSS3的动画应用越来越多了,Animate.css一个从名字上就知道干什么的动画框架. github上的访问地址:http://daneden.github.io/animate.css/ 使用方法 ...
vue 动画框架Animate.css @keyframes
<script src="vue.js"></script> <link rel="stylesheet" href=" ...
CSS动画库——animate.css的使用
Animate.css是一款强大的CSS3动画库官网地址:https://daneden.github.io/animate.css/ 使用方法如下所示: (1)下载animate.css 下载地址 ...
CSS--使用Animate.css制作动画效果
一使用Animate.css动画 // 通过@import引入外部CSS资源; // 引入线上图片及JS文件; // 通过更改CSS类名生成不同类型的CSS3动画; <!DOCTYPE h ...
css3动画简介以及动画库animate.css的使用
在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工.美你妹啊,请叫我前端工程师好不好.呃..好吧,攻城尸...呵呵,作为一个攻城尸,没有点高端大气上档次的东西怎么能行呢,那么css3 ...

随机推荐

iOS 调用地图导航
在IOS6.0系统后,兼容iOS5.0与iOS6.0地图导航,需要分两个步骤 #define SYSTEM_VERSION_LESS_THAN(v) ([[[UIDevice currentDevic ...
一个比较完整的Inno Setup 安装脚本
一个比较完整的Inno Setup 安装脚本,增加了对ini文件设置的功能,一个安装包常用的功能都具备了. [Setup] ; 注: AppId的值为单独标识该应用程序. ; 不要为其他安装程序使用相 ...
LeetCode Majority Element（简单题）
题意: 给一个数组,其中有一个元素的出现次数已经超过数组的一半大小,请找出这个元素? 思路: 可以扫一遍数组,将这个出现次数过多的元素抵消其他的元素,最后必定留下1个以上的元素,就是它自己了. pyt ...
【Avalon】获取隐藏元素的尺寸
保存原来的属性设置成显示的属性获取尺寸设置回原来的属性 var cssShow = { position: "absolute", visibility: "hid ...
如何避免后台IO高负载造成的长时间JVM GC停顿(转)
译者著:其实本文的中心意思非常简单,没有耐心的读者建议直接拉到最后看结论部分,有兴趣的读者可以详细阅读一下. 原文发表于Linkedin Engineering,作者 Zhenyun Zhuang是L ...
JDBC存取二进制文件示例
PutFile.java import java.io.File; import java.io.FileInputStream; import java.sql.*; public class Pu ...
error: failed to initialize alpm library
这个问题出在archlinux上面 [root@sarch pacman]# pacman -Syuerror: failed to initialize alpm library(database ...
js&jquery验证邮箱和手机号是否正确范例
实现源码: <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> ...
jquery中prop()方法和attr()方法的区别
最近在用jquery的时候遇到一个问题,那就是attr()方法,发现这个方法有时候使用会有一些说不出原因的问题.翻翻自己之前笔记发现,还有个函数prop(). 这两个函数都可以用来获取属性. jque ...
解决Volley请求网络数据返回的数据乱码
本人可参考http://tieba.baidu.com/p/4039693566 以往一般我们如下写就可以了 StringRequest request=new StringRequest(url, ...