# @cssints/reveal 中文文档

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

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

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

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

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

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

## 中文简介

为csints而由滚动驱动并被滚动触发的入门动画: 在动画时间线上的动作预设:视图 () (启示录) 或在 CSS 动画触发器上(出现), 有微小的相交点观察员倒置

## 安装

```sh
npm install @cssints/reveal
```

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

## README

# @ cssints/ reveal (英语)

输入动画 [点缀](https://npmcn.com/package/README.md)打开 [@cssints/运动](https://npmcn.com/package/%40cssints/motion/README.md)预设, 作为两个链 成员 `cssints/plugin` `scope()`数字 :

-   **`reveal()`** 正在滚动.._驱动_: 元素将入口滚动到视图时运行, 打开 `animation-timeline: view()` 财务报告和审定财务报表 `animation-range`所以卷轴把它擦干净 本着 [超音速插件](https://github.com/the-illarionov/the-supersonic-plugin-for-scroll-based-animation) 财务报告和审定财务报表 [放松点,js](https://github.com/alexfoxy/lax.js),由浏览器进行工作.
-   **`appear()`** 正在滚动.._触发_: 卷轴只决定 _何时_ 一个正常的,基于时间的动画剧,在 `timeline-trigger` + 键 `animation-trigger`。它保持自己的持续时间和放松,所以慢卷轴无法拉伸 进入。 情况是 [tilbend 关于 CSS 动画触发器的文章](https://utilitybend.com/blog/scroll-triggered-animation-as-the-missing-piece-for-scrollytelling-on-the-web)。 。 。 .

如果目标缺少一个成员继续运行的特性,则在元素进入时,一个0.4 kB的脚本播放同一动画一次.

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

// scroll-driven: the scroll scrubs it
export const fade = reveal();
export const card = reveal()
  .preset("slide-in-up")
  .range("entry 0% entry 100%")
  .duration("500ms")
  .easing("linear");
export const tile = cn(reveal().preset("blur-in"), hover(reveal().duration("1s")));

// scroll-triggered: it plays once on entry, with its own time
export const lede = appear().preset("slide-in-up").duration("600ms").easing("linear");
export const band = appear().preset("fade-in").inOut();
```

国家安全局 `reveal()` (单位:千美元)`fade` 财务报告和审定财务报表 `card` 上文:

```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-4f766ef7 {
    from {
      opacity: var(--motion-o);
    }
  }
  ._reveal-core {
    animation: var(--reveal-k) var(--reveal-d) var(--reveal-e) both;
    animation-range: var(--reveal-g);
    --reveal-k: kf-7f473efd;
    --reveal-rk: kf-4f766ef7;
    --reveal-d: 300ms;
    --reveal-e: ease-out;
    --reveal-g: entry 0% cover 40%;
    --motion-o: 0;
    --motion-x: 0;
    --motion-y: 0;
    --motion-s: 1;
    --motion-b: 0;
    animation-timeline: view();
  }
  @media (prefers-reduced-motion: reduce) {
    ._reveal-core {
      animation-name: var(--reveal-rk);
    }
  }
  /* only when a target lacks scroll-driven animations */
  @supports not (animation-timeline: view()) {
    [data-reveal] ._reveal-core:not([data-reveal-in]) {
      animation-play-state: paused;
    }
  }
}
@layer _.a {
  ._1a9p5a9 {
    --motion-y: 25%;
  }
  ._yorqor {
    --reveal-g: entry 0% entry 100%;
  }
  ._k4abtq {
    --reveal-d: 500ms;
  }
  /* ... */
}
```

国家安全局 `appear()` (单位:千美元)`lede` 财务报告和审定财务报表 `band` 上文:

```css
@layer _.k {
  /* motion's keyframes, the two rules reveal() names too (one pair for the page) */
  ._reveal-enter {
    animation: var(--reveal-enter-k) var(--reveal-enter-d) var(--reveal-enter-e) both;
    timeline-trigger: --reveal-t view() var(--reveal-enter-g);
    --reveal-enter-k: kf-7f473efd;
    --reveal-enter-rk: kf-4f766ef7;
    --reveal-enter-d: 300ms;
    --reveal-enter-e: ease-out;
    --reveal-enter-g: entry 100% exit 0%;
    --reveal-enter: play-once;
    --reveal-leave: none;
    --motion-o: 0;
    --motion-x: 0;
    --motion-y: 0;
    --motion-s: 1;
    --motion-b: 0;
    animation-trigger: --reveal-t var(--reveal-enter) var(--reveal-leave);
    trigger-scope: --reveal-t;
  }
  @media (prefers-reduced-motion: reduce) {
    ._reveal-enter {
      animation-name: var(--reveal-enter-rk);
    }
  }
  /* only when a target lacks animation triggers */
  @supports not (animation-trigger: none) {
    [data-reveal] ._reveal-enter:not([data-reveal-in]) {
      animation-play-state: paused;
    }
  }
}
@layer _.a {
  ._5mnsmm {
    --reveal-enter: play-forwards;
  }
  ._67iv7r {
    --reveal-leave: play-backwards;
  }
  ._1a9p5a9 {
    --motion-y: 25%;
  }
  ._knj5bv {
    --motion-o: 0;
  }
  ._oflqj4 {
    --reveal-enter-e: linear;
  }
  ._rsl9nu {
    --reveal-enter-d: 600ms;
  }
}
```

## 规则

-   **方法**,每一次,任何顺序,所有可选: `preset(name)` (单位:千美元)`fade-in`, (中文(简体) ), `range(<'animation-range'>)` (单位:千美元)`entry 0% cover 40%` 页:1 `reveal()`, (中文(简体) ), `entry 100% exit 0%` 页:1 `appear()`, (中文(简体) ), `duration(<time [0s,∞]>)` (300ms)和 (中文(简体) ) `easing(<easing-function>)` (单位:千美元)`ease-out`) (中文(简体) ). 每个类别都是一个设定自定义属性的类别,所以一个方法在一种 条件.
-   **`reveal()`。 。 。 .** 如果时间线是本地的,则范围决定动画运行时间和卷轴驱动时间(背面) (放松也适用于被抹去的进展).
-   **`appear()`。 。 。 .** 范围是 _激活_ 触发范围: 元素已完全插入 `entry 100%`,所以请 动画在那里播放,而不是在它进入时播放。 动画就翻了 `duration()` 与 `easing()`随便 卷轴是。 默认动作是 `play-once none`:它演奏一次并停留,这是入口想要的—— 以及倒计时者所做的一切. `inOut()` 套装 `play-forwards play-backwards`,所以它发挥回 当 元素叶 (当触发器是本地的).
-   **预设** 是运动的入口预设: `fade-in`, (中文(简体) ), `slide-in-up`, (中文(简体) ), `slide-in-down`, (中文(简体) ), `slide-in-left`, (中文(简体) ), `slide-in-right`, (中文(简体) ), `scale-in`, (中文(简体) ), `blur-in`编辑 `-out` 其中一个不是:倒计时只能当一个元素进入时播放.
-   **复用动相.** 两位委员都点名动议 `motionKeyframes.in` 财务报告和审定财务报表 `motionKeyframes.reducedIn`,所以规则是 movement 的内核, 打印过一次无论使用过多少样式, 一个预设设置了这些密钥框读取的值 动议 `presets` 提案名称下的表格`motionVars`) (中文(简体) ). 只有每个成员自己的财产是自己的名: `appear()`这是 `--reveal-enter-*`,因为 `reveal()`'"内核宣布范围"的简称(`--reveal-k` 财务报告和审定财务报表 一个范围的两个内核可能不能共享其中的一个。 一个瞄准镜可能会重复另一个瞄准镜拥有的名称——即: 他们俩是怎样设定的 `--motion-*` 这样啊 `motion()`, (中文(简体) ), `reveal()` 财务报告和审定财务报表 `appear()` 可以坐在一页.
-   **`trigger-scope` 需要时间.** 触发器名称是内核的(`--reveal-t`)和各类股份的每个要素 它; 没有 `trigger-scope: --reveal-t`,文档中最后一个元素将驱动每张卡片。 用它,两个盒子 自动触发(在Chrome 156中检查)。 一页上的两种不同的样式不会碰撞 或:每个内核都有自己的名字.
-   **减少运动.** 下 `prefers-reduced-motion: reduce` 每个内核运行不透明唯一的密钥框架(运动规则): 滑动、缩放或模糊会在同一范围或触发处消失.
-   **一个内核,写作风格.** 这个 `animation` 简写重排 `animation-timeline` 财务报告和审定财务报表 `animation-trigger`页:1 内核在长手之前打印出一个短手,所以旁边的宣告是取胜的.
-   **冲突.** `reveal()` 财务报告和审定财务报表 `appear()` 设定动画: a `cn()` 拥有一个和一个 `animation*` 属性为 a 构建错误, 来源于内核 : `cssints: reveal: kernel enter sets animation, timeline-trigger, animation-trigger, trigger-scope, animation-name (this style also sets animation-duration)`。 。 。 .
-   **错误** 语法,在类型和建设时间: `reveal.preset: unexpected "fade-out" in "fade-out", expected fade-in | ...`, (中文(简体) ), `appear.range: unexpected "sideways" in "entry 0% sideways"`。 。 。 .

## 浏览器

-   **原产地.** `reveal()`:Chrome 115,Safari 26 (由滚动驱动的动画, `css.properties.animation-timeline` 财务报告和审定财务报表 `animation-range`); Firefox 把它们只放在一面旗帜后. `appear()`: Chrome 146, Edge 146, Opera 130 (单位:千美元)`css.properties.animation-trigger`, (中文(简体) ), `timeline-trigger` 财务报告和审定财务报表 `trigger-scope`); Firefox和Safari没有动画 触发今天。 CSS动画触发器是Interop 2027的候选.
-   **倒地者.** 当浏览器列表目标缺少成员运行的功能时,构建会添加成员的功能 `@supports not` 规则上到工作表(对于所有目标都保留在工作表之外),以及内核 声明不给出支持警告:运行时间会填充它们。 剧本, `@cssints/reveal/runtime`,来 它: 每个运行时间条目命名它( q)`script`),因此使用 `reveal()` 进口到 `virtual:cssints/runtime/reveal.io` 和一个使用 `appear()` 结束 `virtual:cssints/runtime/reveal.io-appear`· ; 每一个目标都有其特征时都是空的。 没什么可以手动进口的.
-   **1个剧本,2个大门.** 在浏览器中,脚本在两种特性都起作用的地方不起作用. 门打开了 `CSS.supports("animation-timeline:view()")` 页:1 `reveal()` 财务报告和审定财务报表 `CSS.supports("animation-trigger:none")` 页:1 `appear()`标记 : `<html data-reveal>` (规则将每个倒回动画放在第一帧)和 `IntersectionObserver` 给定元素 `data-reveal-in` 当它进入了一次播放键框的取景口时, 结束 `duration()`A级 `MutationObserver` 捡起后来添加的元素. 605字节已精密化,369克兹;没有进口.
-   **倒计时等于 `appear()`'默认.** 进入时玩一次就是 `play-once none`,关于Firefox和 萨法里 `appear()` 不需要额外的行为; 它不能恢复运行( e)`inOut()`,或对 卷轴.
-   **何不来个多份的.** [flacker 的卷轴时间线多填充](https://github.com/flackr/scroll-timeline) 刷新 动画与本地时间轴一样, 但它大约是 61 kB (17 kB gzip) , 改写样式表并运行 每个卷轴。 一个入口是一发: 进入时播放一次是大多数网站想要的, 花费1/50字节和 每个卷轴都没什么 代价是背负者没有被洗刷而忽略 `range()`。 。 。 .
-   没有脚本,一个缺少这个功能的目标在负载上播放动画,因为 `motion()` 将: 无保留 藏起来.
-   在Chrome 156(内在触发和强制倒置),Firefox 157(倒置)和WebKit 27.2( 显示本地时间线, 倒计时 `appear()`: `bun run test:browsers`。 。 。 .

## 限制

-   将目标混为一谈(默认浏览器列表),脚本将传送到每个浏览器,并只在浏览器中查找 特性是本地的.
-   后退不遵循范围,滚动方向或离开取景口的元素:它演奏一次. 一个 元素在文档中获取类后(未随其添加),不显示.
-   在脚本运行之前,折叠下方的一款动画可能开始播放;它被暂停位置,并在进入时恢复. 脚本使用第一个模块运行 `reveal()` 或者说 `appear()`。 。 。 .
-   无 `motion()`, (中文(简体) ), `reveal()` 财务报告和审定财务报表 `appear()` 可放在一个要素上: `animation`,这两个 一种风格的内核拒绝( n)`kernels ... both set animation`) (中文(简体) ). 在一页里,他们分享了 运动的键框和习惯 属性.
-   触发器在动画元素本身上. 一个高高的会触发孩子的部分是用手写的: `css.timelineTrigger()` 财务报告和审定财务报表 `css.animationTrigger()` 内容,以及 `css.animationTrigger()` 关于孩子。 A 类 单独触发元素和 a `.from("--name")` 方法被推迟.
-   输入只预设, 每个元素一个; 对于卷轴上的退出, 将动画写入 `animationTimeline("view()")` 财务报告和审定财务报表 `animationRange("exit ...")` 你自己来.

```bash
cd packages/reveal && bun run test            # fixtures through the engine (output by targets, runtime modules, conflicts, errors)
cd packages/reveal && bun run test:browsers   # Chrome, Firefox and WebKit through playwright-core
```

## 贷项

本着 [超音速插件](https://github.com/the-illarionov/the-supersonic-plugin-for-scroll-based-animation) (麻省理工学院,Alex Illarionov)和 [放松点,js](https://github.com/alexfoxy/lax.js) (麻省理工学院,Alex Fox). 预设是 [@cssints/运动](https://npmcn.com/package/%40cssints/motion/README.md)对 没有复制代码 .

## 常见问题

### @cssints/reveal 是什么？

为csints而由滚动驱动并被滚动触发的入门动画: 在动画时间线上的动作预设:视图 \(\) \(启示录\) 或在 CSS 动画触发器上\(出现\), 有微小的相交点观察员倒置

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

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

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

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

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

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

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

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

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

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

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

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

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

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