可选包 · 动画与过渡
下载

可选包

Animation 动画与过渡

过渡与关键帧动画在独立包 pivcss-animate，不编译进核心 pivcss.css，避免基础包膨胀。

状态：可选包 pivcss-animate v0.2 已可用 · 类与 data-pvs-* 见下方 · 源码 site-kit/pivcss-animate/ · JS 在 pivcss.min.js animate 模块

核心包已有什么

下列能力已在 pivcss.css，无需 animate 包：

类名说明
preflight尊重 prefers-reduced-motion，减少非必要动画
pvs-transition*过渡属性组合（见 基础 · 效果）
pvs-duration-150 / -300过渡时长 utility
pvs-ease-in / -out / -in-out缓动曲线 utility
pvs-text-gradient标题渐变字（配合打字机高亮）
表单 focusinput 边框/阴影 0.15s transition
pvs-opacity-*透明度（见基础 · 效果）
pvs-shadow-*盒阴影（见基础 · 效果）

animate 包 · 关键帧类

入场/离场 keyframes（不含核心 pvs-transition*）：

类样式
pvs-animate-fade-in淡入
pvs-animate-fade-out淡出
pvs-animate-slide-up上滑入场
pvs-animate-slide-down下滑入场
pvs-animate-slide-left左滑入场
pvs-animate-slide-right右滑入场
pvs-animate-scale-in缩放入场
pvs-animate-pop-in弹出入场
pvs-animate-none禁用动画

滚动入场 · data-pvs-reveal

加载 pivcss.min.js 后，根节点会加 html.pvs-scroll-ready；元素进入视口时加 .pvs-in。

类样式
data-pvs-reveal默认上滑；可写 left right scale pop fade
--pvs-reveal-delayCSS 变量错峰（ms）
.pvs-scroll-progress顶栏阅读进度（子元素 <i>）
.pvs-marquee跑马灯轨道 __track · 项 __item
.pvs-flip翻转卡 __inner __face--front/back · 修饰 --story --accent
.pvs-cmdHero 命令行条
.pvs-tilt-3d展示窗 3D 倾斜
.pvs-landing-hero营销 Hero band 壳
.pvs-stat统计数字块 __value __label
.pvs-landing-stats统计带 band 壳

JS 钩子（animate 模块）

类样式
data-pvs-typewriter纯文本打字机
data-pvs-typewriter-rich富文本标题打字机
data-pvs-type-template模板：|br| 换行，|<em>…</em>| 片段
data-pvs-type-mode="lines"首行整行、次行逐字
data-pvs-count数字滚动（配合 data-pvs-suffix）

关键帧演示

fade-in

slide-up

pop-in

<div class="pvs-cluster pvs-flex-wrap pvs-gap-2">
  <div class="pvs-card pvs-animate-fade-in" style="width:7rem">
    <div class="pvs-card__body pvs-p-3">
      <p class="pvs-m-0 pvs-text-sm">fade-in</p>
    </div>
  </div>
  <div class="pvs-card pvs-animate-slide-up" style="width:7rem">
    <div class="pvs-card__body pvs-p-3">
      <p class="pvs-m-0 pvs-text-sm">slide-up</p>
    </div>
  </div>
  <div class="pvs-card pvs-animate-pop-in" style="width:7rem">
    <div class="pvs-card__body pvs-p-3">
      <p class="pvs-m-0 pvs-text-sm">pop-in</p>
    </div>
  </div>
</div>

滚动入场示意

页内已加载 pivcss.min.js；向下滚动可见入场

data-pvs-reveal="up"

data-pvs-reveal="scale"

<div class="pvs-stack pvs-gap-3" style="min-height:6rem">
  <p class="pvs-m-0 pvs-text-sm pvs-text-muted">页内已加载 pivcss.min.js；向下滚动可见入场</p>
  <div class="pvs-card" data-pvs-reveal="up">
    <div class="pvs-card__body">
      <p class="pvs-m-0">data-pvs-reveal="up"</p>
    </div>
  </div>
  <div class="pvs-card" data-pvs-reveal="scale">
    <div class="pvs-card__body">
      <p class="pvs-m-0">data-pvs-reveal="scale"</p>
    </div>
  </div>
</div>

过渡示意（核心 utility）

可直接用核心类，不必等 animate 包：

<button type="button" class="pvs-btn pvs-btn--primary pvs-transition pvs-duration-300" style="transition-property:transform,box-shadow" onmouseover="this.style.transform='translateY(-2px)'" onmouseout="this.style.transform=''">悬停微抬（pvs-transition）</button>

安装

在 pivcss.css 之后追加（本页已自动加载 animate 包）：

html
<link rel="stylesheet" href="/assets/pivcss.css" />
<link rel="stylesheet" href="/animate/pivcss-animate.css" />
<script src="/assets/pivcss.min.js" defer></script>
<link rel="stylesheet" href="/assets/pivcss.css" />
<link rel="stylesheet" href="/animate/pivcss-animate.css" />
<script src="/assets/pivcss.min.js" defer></script>
类样式
核心间距基础 · 间距尺度
核心效果基础 · 效果
布局间距类布局 · 间距
源码 READMEsite-kit/pivcss-animate/README.md