NEW ANIMATION TYPES

给 H5 互动应用
补上遮罩、逐行与滤镜三类效果

现有的飞入、渐现、缩放、旋转等基础动画已覆盖位移与形变维度。这份提案补充的是完全不同的一层能力 —— 控制"可见区域"与"画面质感"随时间变化，用于揭晓、聚焦与氛围转场类的互动场景。

14新增效果

4能力分类

0新增底层引擎
(复用 clip-path / filter)

实时预览 · 组合演示

MASK & REVEAL

遮罩 / 揭示类

基于裁剪路径(clip-path)控制内容的可见区域，而非改变元素本身的位置、缩放或透明度。适合图片揭示、悬念揭晓、重点聚焦等场景。

擦除显现／擦除消失

内容沿指定方向被逐步擦除露出或遮挡消失，可分别设置进场与出场的方向。

方向: 左→右时长: 900ms缓动: ease-out

@keyframes wipeReveal {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}

百叶窗

内容被分割为多条状区域，条纹依次或同步展开/闭合，形成百叶窗式的层次感。

条纹: 纵向 · 8条触发: 顺序间隔: 40ms

.blind-strip {
  transform-origin: top;
  animation: blindOpen 3s ease-in-out;
}
@keyframes blindOpen {
  0%, 100% { transform: scaleY(1); }
  50%      { transform: scaleY(0); }
}

圆形遮罩展开／收缩

圆形区域从指定锚点扩大或缩小，模拟探照灯效果，常用于抽奖开奖、重点聚焦。

锚点: 中心半径: 0%→150%缓动: ease-in-out

@keyframes circleReveal {
  from { clip-path: circle(0% at 50% 50%); }
  to   { clip-path: circle(75% at 50% 50%); }
}

矩形遮罩展开／收缩

与圆形遮罩逻辑一致，扩散形状为矩形，支持9个展开原点与单向/双向展开。

原点: 中心方向: 双向时长: 800ms

@keyframes rectReveal {
  from { clip-path: inset(0 50% 0 50%); }
  to   { clip-path: inset(0 0 0 0); }
}

扫光／高光扫过

一条渐变光带扫过元素表面，常叠加在静态内容上作强调，不改变元素本身可见区域。

角度: 75°光带宽: 30%循环: 无限

.sweep-layer::after {
  background: linear-gradient(75deg, transparent, rgba(255,255,255,0.5), transparent);
  animation: sweepMove 2.5s ease-in-out infinite;
}

对角线展开

从角落向对角方向展开，使用polygon路径实现独特的几何揭示效果。

路径: polygon方向: 左上→右下时长: 900ms

@keyframes diagonalReveal {
  from { clip-path: polygon(0 0, 0 0, 0 0, 0 0); }
  to   { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
}

菱形展开

从中心向四角扩散的菱形揭示效果，适合勋章、徽章类元素的展示。

形状: 菱形原点: 中心时长: 1000ms

@keyframes diamondReveal {
  from { clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%); }
  to   { clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); }
}

扇形展开

类似雷达扫描的扇形展开效果，从顶部中心向两侧展开，充满科技感。

形状: 扇形原点: 顶部中心时长: 1000ms

@keyframes sectorReveal {
  from { clip-path: polygon(50% 50%, 50% 0%, 50% 0%); }
  to   { clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 0%, 50% 0%); }
}

LINE & CHAR REVEAL

逐行 / 逐字显现

大段文字按"行"或"字"依次显现，行与行、字与字之间可设置延迟间隔。适合诗歌歌词、列表条目的分批呈现。

越过山丘才发现无人等候

喋喋不休感叹着白昼的漫长

直到眼泪流出才发现依旧倔强

逐行显现

行的判定基于渲染后的实际换行结果，适合诗歌歌词、大段说明文字的分批呈现。

单行动效: 上移淡入行间延迟: 220ms缓动: ease-out

.lrow {
  opacity: 0;
  transform: translateY(12px);
  animation: lineIn 0.6s ease-out forwards;
}
.lrow:nth-child(2) { animation-delay: 0.22s; }

Epub360

文字逐字遮罩

每个字符依次从下方滑入，适合标题、口号的强调展示。

单字动效: 上滑淡入字间延迟: 100ms缓动: cubic-bezier

.chars-stage span {
  display: inline-block;
  transform: translateY(100%);
  animation: charIn 0.5s ease-out forwards;
}
.chars-stage span:nth-child(2) { animation-delay: 0.1s; }

FILTER TRANSITION

滤镜过渡

基于CSS filter数值插值，控制清晰度、色彩与明暗，与位移/缩放/透明度维度完全不重叠。适合情绪化叙事与氛围转场。

模糊 → 清晰

从失焦模糊过渡到完全清晰，适合"聚焦"式登场，反向可用于失焦消失。

模糊值: 14px→0时长: 1000ms

@keyframes blurIn {
  from { filter: blur(14px); opacity: 0.6; }
  to   { filter: blur(0); opacity: 1; }
}

黑白 → 彩色

饱和度从0%过渡到100%，常用于"回忆变现实"式的情绪化叙事转场。

饱和度: 0%→100%时长: 1000ms

@keyframes colorIn {
  from { filter: grayscale(100%) contrast(0.9); }
  to   { filter: grayscale(0%) contrast(1); }
}

明暗过渡

亮度从低值渐变到正常，模拟"聚光灯亮起"式的悬念铺垫效果。

亮度: 25%→100%时长: 1000ms

@keyframes brightIn {
  from { filter: brightness(0.25) saturate(0.6); }
  to   { filter: brightness(1) saturate(1); }
}

COMBO EFFECTS

组合效果

多种动画维度的组合应用，创造更丰富的视觉层次与叙事节奏。

滤镜 + 遮罩组合

圆形遮罩展开的同时配合模糊→清晰+黑白→彩色的滤镜变化，打造电影感的揭晓效果。

遮罩: 圆形滤镜: blur + grayscale时长: 1200ms

@keyframes comboReveal {
  from {
    clip-path: circle(0% at 50% 50%);
    filter: blur(10px) grayscale(100%);
  }
  to {
    clip-path: circle(85% at 50% 50%);
    filter: blur(0) grayscale(0%);
  }
}

给 H5 互动应用补上遮罩、逐行与滤镜三类效果