animate.css

以你之姓@ 2021-07-05 01:24 511阅读 0赞

**Every feedback is welcome!**

让添加CSS动画像喝水一样容易

`animate.css`是一系列酷炫，有趣，跨浏览器的动画，供您在项目中使用。

## Installation ##

Install via npm:

$ npm install animate.css --save

or `yarn`:

$ yarn add animate.css

## 用法 ##

在您的网站上使用`animate.css`，只要简单地把样式表插入到文档中的 `<head>`中，并为需要动画的元素添加一个CSS类名`animate__animated`即可，以及动画的名称。就是这样！你就有了一个CSS动画效果。超强！

使用CDN托管版本 by [CDNJS][]

### `Animations` ###

要为元素设置动画，请将“ `animated`”类添加到元素。 您可以包含无限循环类“无限”。 最后，您需要向元素添加以下类之一：

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

Full example:

<h1 class="animated infinite bounce delay-2s">Example</h1>

[Check out all the animations here!][Check out all the animations here]

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

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

## Usage with Javascript ##

将animate.css与Javascript结合使用时，您可以使用`animate.css`进行大量其他工作。 一个简单的例子：

const element =  document.querySelector('.my-element')
    element.classList.add('animated', 'bounceOutLeft')

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

const element =  document.querySelector('.my-element')
    element.classList.add('animated', 'bounceOutLeft')
    
    element.addEventListener('animationend', function() {  doSomething() })

您可以使用以下简单功能来添加和删除动画：

function animateCSS(element, animationName, callback) { 
        const node = document.querySelector(element)
        node.classList.add('animated', animationName)
    
        function handleAnimationEnd() { 
            node.classList.remove('animated', animationName)
            node.removeEventListener('animationend', handleAnimationEnd)
    
            if (typeof callback === 'function') callback()
        }
    
        node.addEventListener('animationend', handleAnimationEnd)
    }

并像这样使用它：

animateCSS('.my-element', 'bounce')
    
    // or
    animateCSS('.my-element', 'bounce', function() { 
      // Do something after animation
    })

注意，这些示例使用的是ES6的`const`声明，放弃了对IE10和某些老化的浏览器的支持。 如果愿意，可以将`const`更改为`var`声明，然后将IE10转换为某些旧浏览器。

## Setting `_Delay_` and `_Speed_` ##

### Delay Class ###

可以直接在元素的`class`属性上添加延迟，如下所示：

<div class="animated bounce delay-2s">Example</div>

<table> 
 <thead> 
  <tr> 
   <th>Class Name</th> 
   <th>Delay Time</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>delay-2s</code></td> 
   <td><code>2s</code></td> 
  </tr> 
  <tr> 
   <td><code>delay-3s</code></td> 
   <td><code>3s</code></td> 
  </tr> 
  <tr> 
   <td><code>delay-4s</code></td> 
   <td><code>4s</code></td> 
  </tr> 
  <tr> 
   <td><code>delay-5s</code></td> 
   <td><code>5s</code></td> 
  </tr> 
 </tbody> 
</table>

> 默认延迟仅为1秒至5秒。 如果您需要自定义延迟，请将其直接添加到自己的CSS代码中。

### Slow, Slower, Fast, and Faster Class ###

通过添加这些类，可以控制动画的速度，如下所示：

<div class="animated bounce faster">Example</div>

<table> 
 <thead> 
  <tr> 
   <th>Class Name</th> 
   <th>Speed Time</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>slow</code></td> 
   <td><code>2s</code></td> 
  </tr> 
  <tr> 
   <td><code>slower</code></td> 
   <td><code>3s</code></td> 
  </tr> 
  <tr> 
   <td><code>fast</code></td> 
   <td><code>800ms</code></td> 
  </tr> 
  <tr> 
   <td><code>faster</code></td> 
   <td><code>500ms</code></td> 
  </tr> 
 </tbody> 
</table>

> `animated` 类的默认速度为`1s`.如果您需要自定义持续时间，请将其直接添加到自己的CSS代码中。

## Custom Builds ##

Animate.css由gulp.js驱动，这意味着您可以轻松创建自定义版本。 首先，您需要Gulp和所有其他依赖项：

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

接下来，运行`npx 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让添加CSS动画像喝水一样容易 ##

`animate.css`是一堆很酷的，有趣的，跨浏览器的动画效果库，你可以随意在你的项目中使用。用在你想要突出的任何地方，如主页，滑块，这像喝水一样容易，迷死人了。

### 用法 ###

在您的网站上使用`animate.css`，只要简单地把样式表插入到文档中的`<HEAD>`中，并为需要动画的元素添加一个CSS类名即可，以及动画的名称。就是这样！你就有了一个CSS动画效果。超强！

注\* 示例

<h1 class="animated bounceOut">Animate.css</h1>

当与jQuery结合起来，你可以自己决定何时启用这些动画，通过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;
    }

注意：一定要在CSS恬当的的前缀(`webkit, moz`等)代替“`vendor`”

### 自定义Build(构建) ###

Animate.css支持`Grunt`，您可以很容易地创建自定义Build流程。首先，你需要Grunt和其他依赖关系：

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

接下来，运行`grunt watch`以更改和编译您的自定义生成文件。例如你只需要一部分动画效果，只需编辑 `animate-config.json` 文件，并选择你需要使用的动画。

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

[CDNJS]: https://cdnjs.com/libraries/animate.css
[Check out all the animations here]: https://daneden.github.io/animate.css/