# @brightleaf/animate\.scss 中文文档

规范地址：https://npmcn.com/package/%40brightleaf/animate.scss/

版本：3\.7\.1
npm 元数据更新时间：2022-04-04T20:39:56.675Z
中文译文更新时间：2026-11-08T15:25:13.973Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40brightleaf/animate.scss
原文对照：https://npmcn.com/package/%40brightleaf/animate.scss/?lang=original
项目主页：https://brightleaf.dev/animate.css/
源码仓库：https://github.com/brightleaf/animate.scss

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：38.6 kB，100 个文件
- 模块格式：CommonJS
- TypeScript 类型：未声明
- 运行依赖：0 个
- 首次发布：2019-11-24T03:46:59.127Z
- 最新版本发布：2019-11-24T03:46:59.333Z
- 近 30 天下载量：7475（2026-10-09 至 2026-11-07，npm 官方下载统计）
- 已发布版本数：1（近 12 个月 0 个）

## 中文简介

_Just-add-water (s) CSS动画. 萨斯港 [动画. css](https://daneden.github.io/animate.css/)_

## 安装

```sh
npm install @brightleaf/animate.scss
```

也可以使用：`pnpm add @brightleaf/animate.scss`、`yarn add @brightleaf/animate.scss`、`bun add @brightleaf/animate.scss`

## README

# 动画.css

_Just-add-water (s) CSS动画. 萨斯港 [动画. css](https://daneden.github.io/animate.css/)_

`animate.scss` 是一个很酷的,有趣的, 和交叉浏览的动画, 供您用于您的项目。 对强调,主页,滑板, 和一般的刚加-水-真棒.

## 安装

通过 npm 安装 :

```bash
$ npm i @brightleaf/animate.scss
```

线条 :

```bash
$ yarn add @brightleaf/animate.scss
```

## 使用量

要在您的网站上使用 animate.scs, 您可以使用 1) 只需将编译的样式表降入您的文档 `<head>`,或者您可以直接将 sass 文件导入您的项目。 从那里可以加课 `animated` 与任何动画名称一起。 就这样! 你有CSS动画元素. 超级棒!

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

如果你直接输入sass,你有两种选择. 您可以通过导入来将软件包整体拉入, 包括所有动画 `animate.scss` 从软件包根 :

```scss
@import "~@brightleaf/animate.scss/animate";
```

...或者你可以拉动动画(或动画组),因为你需要它们。 使用此选项, 您还需要导入 `settings` 财务报告和审定财务报表 `classes` 独立文件 :

```scss
@import "~@brightleaf/animate.scss/source/settings"; // settings first!
@import "~@brightleaf/animate.scss/source/flippers"; // animation group!
@import "~@brightleaf/animate.scss/source/lightspeed/lightSpeedIn"; // individual animation!
@import "~@brightleaf/animate.scss/source/classes"; // classes!
```

### 动画

动画元素, 添加类 `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` | `jackInTheBox` |
| `rollIn` | `rollOut` | `zoomIn` | `zoomInDown` |
| `zoomInLeft` | `zoomInRight` | `zoomInUp` | `zoomOut` |
| `zoomOutDown` | `zoomOutLeft` | `zoomOutRight` | `zoomOutUp` |
| `slideInDown` | `slideInLeft` | `slideInRight` | `slideInUp` |
| `slideOutDown` | `slideOutLeft` | `slideOutRight` | `slideOutUp` |
| `heartBeat` |  |  |  |

完整实例 :

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

可以更改动画的长度,添加延迟或更改其播放次数:

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

## 用 j 查询

你可以做一堆其他的东西 与动能。 与 jQuery 组合时会按下 。 一个简单的例子:

```javascript
$("#yourElement").addClass("animated bounceOutLeft");
```

您也可以在动画结束时检测:

```javascript
// See https://github.com/daneden/animate.scss/issues/644
var animationEnd = (function(el) {
  var animations = {
    animation: "animationend",
    OAnimation: "oAnimationEnd",
    MozAnimation: "mozAnimationEnd",
    WebkitAnimation: "webkitAnimationEnd"
  };

  for (var t in animations) {
    if (el.style[t] !== undefined) {
      return animations[t];
    }
  }
})(document.createElement("div"));

$("#yourElement").one(animationEnd, doSomething);
```

[查看视频教程](https://www.youtube.com/watch?v=CBQGl6zokMs) 如何使用 animate.css 与 jQuery 在这里.

**说明:** `jQuery.one()` 用于最多执行事件处理器时 _一次_更多信息 [这里](http://api.jquery.com/one/)。 。 。 .

可以扩展jQuery并添加一个功能,为您做这一切:

```javascript
$.fn.extend({
  animateCss: function(animationName, callback) {
    var animationEnd = (function(el) {
      var animations = {
        animation: "animationend",
        OAnimation: "oAnimationEnd",
        MozAnimation: "mozAnimationEnd",
        WebkitAnimation: "webkitAnimationEnd"
      };

      for (var t in animations) {
        if (el.style[t] !== undefined) {
          return animations[t];
        }
      }
    })(document.createElement("div"));

    this.addClass("animated " + animationName).one(animationEnd, function() {
      $(this).removeClass("animated " + animationName);

      if (typeof callback === "function") callback();
    });

    return this;
  }
});
```

像这样使用它:

```javascript
$("#yourElement").animateCss("bounce");
or;
$("#yourElement").animateCss("bounce", function() {
  // Do something after animation
});
```

## 设置 _延迟_ 财务报告和审定财务报表 _速度_

### 延迟类

可以直接在元素的类属性上添加延迟,就像这样:

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

这些类名是由 `$animate-scss-second-delays` 列表变量。 您可以覆盖此变量, 为您自己的需要创建类 :

```scss
$animate-scss-second-delays: 1, 2, 3, 4, 5, 6, 7; // go on to your heart's content!
```

| 清单项目 | 类名 | 延迟时间 |
| --- | --- | --- |
| 2个 | `delay-2s` | `2s` |
| 3个 | `delay-3s` | `3s` |
| 页:1 | `delay-4s` | `4s` |
| 页:1 | `delay-5s` | `5s` |

### 速度类

这些类名是由 `$animate-scss-durations` 地图变量。 可以通过增加这些类来控制动画的速度,作为下面的样本:

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

您可以创建自己的地图, 甚至添加自定义速度, 从而覆盖这些值 :

```scss
$animate-scss-durations: (
  fast: 800ms,
  faster: 500ms,
  fassssssssssst: 200ms,
  // custom speed!
    slow: 2s,
  slower: 3s
);
```

| 类名/映射密钥 | 默认速度 |
| --- | --- |
| `slow` | `2s` |
| `slower` | `3s` |
| `fast` | `800ms` |
| `faster` | `500ms` |

> **说明**编号: `animated` 类的默认速度为 `1s`如果您需要自定义持续时间,请为 `$animate-scss-default-duration` 变量.

## 无障碍

动画. scs支持 [`prefers-reduced-motion` 媒体查询](https://webkit.org/blog/7551/responsive-design-for-motion/) 这样具有运动敏感性的用户就可以选择退出动画. 在被支持的平台上(目前只有OSX Safari和iOS Safari),用户可以在他们的操作系统偏好上选择"减少运动",它将为他们关闭CSS的过渡而无需做任何进一步的工作.

## 许可证

Animate.css根据麻省理工学院的许可证获得许可证。 ([http://opensource.org/licenses/MIT 互联网档案馆的存檔,存档日期2013-12-02](http://opensource.org/licenses/MIT)(中文(简体) )

## 捐款

拉请求是这里的路。 我们只有两条规则可以提交拉动请求:匹配命名惯例(骆驼Case,分类\[花样,回弹等\]),让我们看到一个提交动画的演示 [笔](http://codepen.io/)该 **最后一个很重要**。 。 。 .

## 常见问题

### @brightleaf/animate\.scss 是什么？

Just-add-water \(s\) CSS动画\. 萨斯港 动画\. css

### 如何安装 @brightleaf/animate\.scss？

在项目目录运行 npm install @brightleaf/animate\.scss，或使用 pnpm add / yarn add / bun add。

### @brightleaf/animate\.scss 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/brightleaf\_\_animate\.scss 是否存在。

### @brightleaf/animate\.scss 支持 ESM 还是 CommonJS？

以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。

### @brightleaf/animate\.scss 可以商用吗？

@brightleaf/animate\.scss 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @brightleaf/animate\.scss 的下载量有多少？

根据 npm 官方下载统计，@brightleaf/animate\.scss 在 2026/10/09 – 2026/11/07 这 30 天内被下载 7,475 次，日均约 249 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @brightleaf/animate\.scss 还在维护吗？

最新版本 3\.7\.1 发布于 2019/11/24（6 年前）；至今共发布 1 个版本，其中过去 12 个月发布了 0 个；首次发布于 2019/11/24。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。