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 ...

随机推荐

div居中问题
首们需要position:absolute搜索;绝对定位. 而层的定位点,使用外补丁margin负值的方法. 负值的大小为层自身宽度高度除以二. div { position:absolut ...
iOS APP上线流程
前言:作为一名IOS开发者,把开发出来的App上传到App Store是必须的.下面就来详细介绍下具体流程. 1.打开苹果开发者中心:https://developer.apple.com 打开后点击 ...
完美解决方案,可排除DATASET不支持System.Nullable错误
完美解决方案,可排除DATASET不支持System.Nullable错误 using System; using System.Collections.Generic; using System.L ...
magento做手机端思路
有个插件可以检测移动设备访问,然后显示对于的手机主题这个方法最简单另外的就是调接口了这个用来做app也行不过mg的数据不是json数据,是xml速度很慢
故事板(Storyboard)
1 使用Storyboard完成各项常见功能 1.1 问题故事板Storyboard是IOS5开始引入的一个新的系统,将多个视图文件(类似xib文件)集中到一个单独的可视化工作区间,负责创建和管理所 ...
Android异步处理一：使用Thread+Handler实现非UI线程更新UI界面
Android应用的开发过程中需要把繁重的任务(IO,网络连接等)放到其他线程中异步执行,达到不阻塞UI的效果. 下面将由浅入深介绍Android进行异步处理的实现方法和系统底层的实现原理. 本文介绍 ...
IE6 IE8下背景图片不显示问题
更改background:url()no-repeat; 去掉no-repeat即可解决问题!
iOS学习笔记---c语言第二天
一.bool布尔类型 c语言没有bool类型,oc里有bool类型是一种非真即假的数据类型,布尔类型的变量只有yes和no两个值.yes表示表达式是真,no表示表达式是假. 在c语言中认为非0 ...
希尔排序（C++版）
#include <iostream> using namespace std; /** Shell Sort * * Key: * * increment * * insertSort( ...
hdu4639 hehe ——斐波纳契数列，找规律
link:http://acm.hdu.edu.cn/showproblem.php?pid=4639 refer to: http://blog.csdn.net/dongdongzhang_/ar ...