# @adam\.plesnik/tailwindcss-scroll-driven-animations 中文文档

规范地址：https://npmcn.com/package/%40adam.plesnik/tailwindcss-scroll-driven-animations/

版本：0\.4\.1
npm 元数据更新时间：2026-11-02T13:50:11.949Z
中文译文更新时间：2026-11-06T08:44:49.812Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40adam.plesnik/tailwindcss-scroll-driven-animations
原文对照：https://npmcn.com/package/%40adam.plesnik/tailwindcss-scroll-driven-animations/?lang=original
项目主页：https://scrolldriven.adamplesnik.com/
源码仓库：https://github.com/adamplesnik/tailwindcss-scroll-driven-animations

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

- 包体积（解压后）：7.7 kB，4 个文件
- 模块格式：CommonJS
- TypeScript 类型：未声明
- 运行依赖：0 个
- peer 依赖：tailwindcss \>=4\.0\.0
- 首次发布：2024-03-29T21:53:03.072Z
- 最新版本发布：2026-11-02T13:50:11.797Z
- 近 30 天下载量：3740（2026-10-05 至 2026-11-03，npm 官方下载统计）
- 已发布版本数：19（近 12 个月 2 个）

## 中文简介

Tailwind CSS v4+的插件,为卷轴驱动动画提供公用功能.

## 安装

```sh
npm install @adam.plesnik/tailwindcss-scroll-driven-animations
```

也可以使用：`pnpm add @adam.plesnik/tailwindcss-scroll-driven-animations`、`yarn add @adam.plesnik/tailwindcss-scroll-driven-animations`、`bun add @adam.plesnik/tailwindcss-scroll-driven-animations`

## README

# 由滚动驱动的 Tailwind CSS 动画

!['License'](https://flat.badgen.net/github/license/adamplesnik/tailwindcss-scroll-driven-animations) !['Checks'](https://flat.badgen.net/github/checks/adamplesnik/tailwindcss-scroll-driven-animations) !['Stars'](https://flat.badgen.net/github/stars/adamplesnik/tailwindcss-scroll-driven-animations)

**非正式** 和Tailwind CSS v4+的实验插件,为卷轴驱动动画提供公用设施.

`unofficial` `experimental`

## 安装

从 npm 安装插件 :

```sh
npm install @adam.plesnik/tailwindcss-scroll-driven-animations
```

然后在您的 CSS 主文件中注册插件 `@plugin` 指令 :

```css
@import 'tailwindcss';
@plugin '@adam.plesnik/tailwindcss-scroll-driven-animations';
```

### 尾风 CSS v3

Tailwind CSS v3.4+由此插件的v0.3.x发布支持. 安装该版本 :

```sh
npm install @adam.plesnik/tailwindcss-scroll-driven-animations@0.3
```

然后将插件添加到您的 `tailwind.config.js`数字 :

```js
module.exports = {
  plugins: [
    require('@adam.plesnik/tailwindcss-scroll-driven-animations'),
    // ...
  ],
}
```

## 使用量

该插件为CSS卷轴驱动的动画属性的子集提供公用设施.

-   `animation-timeline`
-   `animation-range`
-   `scroll-timeline`, (中文(简体) ), `view-timeline`
-   `timeline-scope`

### 动画时间线

卷轴驱动动画中唯一最令人印象深刻的特征是匿名动画时间表. 它允许用户只需滚动页面就可以轻松地触发任何东西. 插件允许用户使用 `.timeline` 默认为 CSS 类 `animation-timeline: scroll(y)` ,同时也提供了一个选项,可以设置带有修饰符的自定义时间表名.

### 滚动和查看时间线

卷轴和取景时间表为用户提供了更好的动画控制. 两者 `.scroll-timeline` 财务报告和审定财务报表 `.view-timeline` 意在与修饰符一起使用,以设定时间线名称.

### 范围

动画范围控制动画的始末. 功用类 `.range` 提供了各种选择,并有可能使用长度修改剂.

### 范围

时间线范围允许控制母体以外的动画元素,定义了时间线. 工具 `.scope` 应使用一个修改符来定义由 `.scroll-timeline` 或者说 `.view-timeline`。 。 。 .

### 浏览器支持

由滚动驱动的动画自2026年5月起得到支持,但应谨慎使用. 使用 `no-animations:...` 后退型的变种.

## 常见问题

### @adam\.plesnik/tailwindcss-scroll-driven-animations 是什么？

Tailwind CSS v4\+的插件,为卷轴驱动动画提供公用功能\.

### 如何安装 @adam\.plesnik/tailwindcss-scroll-driven-animations？

在项目目录运行 npm install @adam\.plesnik/tailwindcss-scroll-driven-animations，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：tailwindcss（\>=4\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @adam\.plesnik/tailwindcss-scroll-driven-animations 支持 TypeScript 吗？

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

### @adam\.plesnik/tailwindcss-scroll-driven-animations 支持 ESM 还是 CommonJS？

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

### @adam\.plesnik/tailwindcss-scroll-driven-animations 可以商用吗？

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

### @adam\.plesnik/tailwindcss-scroll-driven-animations 的下载量有多少？

根据 npm 官方下载统计，@adam\.plesnik/tailwindcss-scroll-driven-animations 在 2026/10/05 – 2026/11/03 这 30 天内被下载 3,740 次，日均约 125 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @adam\.plesnik/tailwindcss-scroll-driven-animations 还在维护吗？

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