README

#Animate.css 只需添加水的CSS动画

animate.css 是一系列酷炫、有趣且兼容所有浏览器的动画，您可以在项目中使用。非常适合强调、主页、滑块和一般的“只需添加水”般的效果。

安装

通过 Bower 安装，只需执行以下操作

$ bower install animate.css --save

或者您可以通过 npm 安装

$ npm install animate.css --save

##基本用法

在您的文档的 <head> 中包含样式表

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

或使用由 CDNJS 托管的版本

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
</head>

将 animated 类添加到您要动画化的元素上。您还可以包含 infinite 类来实现无限循环。
最后，您需要添加以下其中一个类

bounce
flash
pulse
rubberBand
shake
headShake
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

完整示例

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

查看所有动画！

##使用说明要将animate.css应用到您的网站中，只需将样式表放入文档的<head>部分，并将animated类添加到某个元素上，同时加上任何动画名称。就这么简单！您已经拥有了一个CSS动画元素。太棒了！

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

或使用由 CDNJS 托管的版本

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
</head>

当您将animate.css与jQuery结合使用或添加自己的CSS规则时，可以完成许多其他操作。轻松地使用jQuery动态添加动画

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

您还可以检测动画何时结束

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

在此处观看如何使用Animate.css和jQuery的视频教程。

注意：当您想要最多只执行一次事件处理器时，使用jQuery.one()。更多信息在这里。

您还可以扩展jQuery以添加一个为您完成所有工作的函数

$.fn.extend({
    animateCss: function (animationName) {
        var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
        this.addClass('animated ' + animationName).one(animationEnd, function() {
            $(this).removeClass('animated ' + animationName);
        });
    }
});

使用方法如下

$('#yourElement').animateCss('bounce');

您可以更改动画的持续时间，添加延迟或更改动画播放次数

#yourElement {
  -vendor-animation-duration: 3s;
  -vendor-animation-delay: 2s;
  -vendor-animation-iteration-count: infinite;
}

注意：务必将CSS中的“vendor”替换为相应的供应商前缀（webkit, moz等）

自定义构建

Animate.css由gulp.js驱动，您可以轻松地创建自定义构建。首先，您需要安装Gulp和所有其他依赖项

$ cd path/to/animate.css/
$ sudo npm install

接下来，运行gulp以编译您的自定义构建。例如，如果您只想使用“引人注目者”中的一小部分，只需编辑animate-config.json文件，只选择您想要使用的动画。

"attention_seekers": {
  "bounce": true,
  "flash": false,
  "pulse": false,
  "shake": true,
  "headShake": true,
  "swing": true,
  "tada": true,
  "wobble": true,
  "jello":true
}

许可证

Animate.css遵循MIT许可证。(https://open-source.org.cn/licenses/MIT)

贡献

在此处，拉取请求（Pull requests）是主要的途径。我提前为拉取请求和问题的缓慢响应表示歉意。我只有两个提交拉取请求的规则：匹配命名约定（驼峰式，分类[fades, bounces等]）并让我们看到提交的动画在pen中的演示。最后一点很重要。

daneden / animate.css

维护者

详细信息

README

安装

自定义构建

许可证

贡献