由滚动驱动的 Tailwind CSS 动画

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

unofficial experimental

安装

从 npm 安装插件 :

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

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

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

尾风 CSS v3

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

npm install @adam.plesnik/[email protected]

然后将插件添加到您的 tailwind.config.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:... 后退型的变种.