# @cssints/motion 中文文档

规范地址：https://npmcn.com/package/%40cssints/motion/

版本：0\.35\.1
npm 元数据更新时间：2026-11-07T14:56:20.275Z
中文译文更新时间：2026-11-11T03:34:00.596Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40cssints/motion
原文对照：https://npmcn.com/package/%40cssints/motion/?lang=original
项目主页：https://cssints.dev/
源码仓库：https://github.com/alexeiaccio/css-in-ts-compiler

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

- 包体积（解压后）：15.1 kB，5 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- Node.js 要求：\>=22
- 运行依赖：0 个
- peer 依赖：cssints ^0\.35\.0
- 首次发布：2026-10-10T20:57:53.715Z
- 最新版本发布：2026-11-07T14:56:19.948Z
- 近 30 天下载量：7855（2026-10-11 至 2026-11-09，npm 官方下载统计）
- 已发布版本数：43（近 12 个月 43 个）

## 中文简介

Csints 的动画预设: 淡出、 滑出、 缩放和模糊的内核, 与密钥框架( ) 相比, 并带有偏好- 减小- 移动

## 安装

```sh
npm install @cssints/motion
```

也可以使用：`pnpm add @cssints/motion`、`yarn add @cssints/motion`、`bun add @cssints/motion`

## README

# @cssints/运动

动画预设 [点缀](https://npmcn.com/package/README.md): 淡出、滑出、缩放和模糊, 以一个链式成员的身份进出 `cssints/plugin` `scope()`以可调和的方式 [尾风-运动](https://github.com/romboHQ/tailwindcss-motion) 财务报告和审定财务报表 [尾风动物](https://github.com/jamiebuilds/tailwindcss-animate): 预设只设置自定义属性,以及 一个内核结束 `keyframes()` 运行他们。 没有运行时间.

```ts
import { cn, hover } from "cssints" with { type: "cssints" };
import { motion } from "@cssints/motion" with { type: "cssints" };

export const toast = motion()
  .preset("slide-in-up")
  .duration("500ms")
  .delay("100ms")
  .easing("linear");
export const leave = motion().preset("fade-out");
export const slow = cn(motion().preset("scale-in"), hover(motion().duration("1s")));
```

```css
@layer _.k {
  @keyframes kf-7f473efd {
    from {
      opacity: var(--motion-o);
      translate: var(--motion-x) var(--motion-y);
      scale: var(--motion-s);
      filter: blur(var(--motion-b));
    }
  }
  @keyframes kf-eaeb1c11 {
    to {
      opacity: var(--motion-o);
      translate: var(--motion-x) var(--motion-y);
      scale: var(--motion-s);
      filter: blur(var(--motion-b));
    }
  }
  @keyframes kf-4f766ef7 {
    from {
      opacity: var(--motion-o);
    }
  }
  @keyframes kf-9b622913 {
    to {
      opacity: var(--motion-o);
    }
  }
  ._motion-core {
    animation: var(--motion-n) var(--motion-d) var(--motion-e) var(--motion-l) both;
    --motion-in: kf-7f473efd;
    --motion-out: kf-eaeb1c11;
    --motion-ri: kf-4f766ef7;
    --motion-ro: kf-9b622913;
    --motion-n: none;
    --motion-r: none;
    --motion-d: 300ms;
    --motion-l: 0s;
    --motion-e: ease-out;
    --motion-o: 1;
    --motion-x: 0;
    --motion-y: 0;
    --motion-s: 1;
    --motion-b: 0;
  }
  @media (prefers-reduced-motion: reduce) {
    ._motion-core {
      animation-name: var(--motion-r);
    }
  }
}
@layer _.a {
  ._13945js {
    --motion-n: var(--motion-in);
  }
  ._jddydc {
    --motion-r: var(--motion-ri);
  }
  ._knj5bv {
    --motion-o: 0;
  }
  ._1a9p5a9 {
    --motion-y: 25%;
  }
  ._46hkr9 {
    --motion-d: 500ms;
  }
  /* ... */
}
```

## 规则

-   **方法**,每一次,任何顺序,所有可选: `preset(name)`, (中文(简体) ), `duration(<time [0s,∞]>)` (300毫秒), `delay(<time>)` (0s), (单位:千美元), `easing(<easing-function>)` (单位:千美元)`ease-out`) (中文(简体) ). 每一类都是设定定制属性的,所以 方法在条件下发挥作用(`hover(motion().duration("1s"))`) (中文(简体) ).
-   **预设**数字 : `fade-in`, (中文(简体) ), `fade-out`, (中文(简体) ), `slide-in-up`, (中文(简体) ), `slide-in-down`, (中文(简体) ), `slide-in-left`, (中文(简体) ), `slide-in-right`, (中文(简体) ), `slide-out-up`, (中文(简体) ), `slide-out-down`, (中文(简体) ), `slide-out-left`, (中文(简体) ), `slide-out-right`, (中文(简体) ), `scale-in`, (中文(简体) ), `scale-out`, (中文(简体) ), `blur-in`, (中文(简体) ), `blur-out`,每个变相;a 滑动 25% 的框, 缩放开始( 或结束) 0. 5, 模糊 5px (尾风- 运动的中等大小) . `-in` 从这些值到元素本身, `-out` 从它自己到那些, 并持有结束(`both`) (中文(简体) ). `slide-in-up` - 逐步到位; `slide-out-up` 移动起来.
-   **关键框架** 四岁 `keyframes()`:进出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出入出出出出出出出出出出出出出入出出出出出出出出出出出出出出出出入出出出出出出出出出出出出出出出出出出出出出出出出出出入出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出 他们 读取 `--motion-*`,所以所有预设都共享. 内核为样式并命名于 `--motion-in`, (中文(简体) ), `--motion-out`, (中文(简体) ), `--motion-ri` 财务报告和审定财务报表 `--motion-ro` (单位:千美元)`vars()`),将他们的规则放在工作表中 1个(`--motion-n: var(--motion-in)`) (中文(简体) ).
-   **减少运动.** 下 `prefers-reduced-motion: reduce` 内核运行不透明唯一的密钥框架:幻灯片、缩放或 模糊变成同一时间的淡出 `animationend` 仍然开火.
-   **没有遗产.** 内核重排每个 `--motion-*` 所以另一部电影里面的动画 是从它自己开始的 预设,不是其父母的.
-   **冲突.** `motion()` 设置动画: a `cn()` 握着它,一个 `animation*` 属性是一个构建错误, 来源于内核: `cssints: motion: kernel core sets animation, animation-name (this style also sets animation-duration)`。 。 。 .
-   **错误** 语法,在类型和建设时间: `motion.preset: unexpected "spin" in "spin", expected fade-in | ...`, (中文(简体) ), `motion.duration: unexpected "-1s" in "-1s", expected <time [0s,∞]>`。 。 。 .
-   **对于其他成员.** `presets` (按名称排列的表格), `PresetName`, (中文(简体) ), `motionKeyframes`, (中文(简体) ), `motionVars` (习惯 属性键框,按预设字段表示: `motionVars.y` 实值 `--motion-y`和 `motionScope` (其内核) `core`)是导出的,所以一个建立在这些预设上的成员会重新使用它们,而从来不写 `--motion-*` 名称.

## 限制

-   每个元素一个预设: `preset()` 用于一次,而预设不会堆叠(每张幻灯片、缩放和模糊已淡出).
-   关键框架 `translate`, (中文(简体) ), `scale` 财务报告和审定财务报表 `filter`: 在动画中(和之后) `-out` (一) 替换 元素本身; `transform` 无人知晓.
-   没有循环预设(脉冲,自旋,回弹),没有弹簧松动,没有每个预设大小.

```bash
cd packages/motion && bun run test   # fixtures through the engine (output, conflicts, errors); bun run typecheck for the type test
```

## 贷项

设计( 只设置自定义属性的预设, 一个内核 over) `keyframes()`),预设名称和 中等尺寸(25%、0.5%、5px) [尾风-运动](https://github.com/romboHQ/tailwindcss-motion) (麻省理工学院,伦博) (有限)和 [尾风动物](https://github.com/jamiebuilds/tailwindcss-animate) (麻省理工学院,杰米·凯尔). 没有代码 复制.

## 常见问题

### @cssints/motion 是什么？

Csints 的动画预设: 淡出、 滑出、 缩放和模糊的内核, 与密钥框架\( \) 相比, 并带有偏好- 减小- 移动

### 如何安装 @cssints/motion？

在项目目录运行 npm install @cssints/motion，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：cssints（^0\.35\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @cssints/motion 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @cssints/motion 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @cssints/motion 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>=22。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @cssints/motion 可以商用吗？

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

### @cssints/motion 的下载量有多少？

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

### @cssints/motion 还在维护吗？

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