交互式词条

前后对比滑杆

前后对比滑杆用于把信息变化和视觉细节处理得更精致。

入场与退场编排与时间位移与变换状态过渡

已完成

当前词条

预览、参数和导出

前后对比滑杆用于把信息变化和视觉细节处理得更精致。

前后对比滑杆是「润色与效果」中的核心词条，用来把信息变化和视觉细节处理得更精致。

浏览分类

Before / after slider

时长420ms

位移28px

延迟0ms

曲线soft

.motion-card {
  animation-name: motion-before-after-slider;
  animation-duration: 420ms;
  animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
  animation-delay: 0ms;
  animation-fill-mode: both;
  will-change: transform, opacity;
  transform-origin: center;
}

@keyframes motion-before-after-slider {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.97);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .motion-card {
    animation-name: motion-before-after-slider-reduced;
    animation-duration: 180ms;
    animation-delay: 0ms;
    transform: none;
    animation-iteration-count: 1;
  }
}

@keyframes motion-before-after-slider-reduced {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

Agent Prompt

为界面片段使用「前后对比滑杆」动效。围绕前后对比滑杆用于把信息变化和视觉细节处理得更精致。设计 preview，动画 transform 与 opacity，时长 420ms，幅度 28px，延迟 0ms，曲线使用柔和（cubic-bezier(0.23, 1, 0.32, 1)），并包含 reduced-motion fallback。

intent: entrancefeel: softcontext: card

使用场景

需要把信息变化和视觉细节处理得更精致时使用。
适合低频或中频界面变化，保持短、清楚、可打断。
复制 prompt 或 CSS 后，可交给 agent 直接实现。

示例

在卡片、列表项或轻量面板里预览前后对比滑杆。
调节时长、位移、延迟和曲线，得到适合当前界面的前后对比滑杆。

Review notes

优先动画 transform 和 opacity，避免 layout 与 paint 抖动。
UI 动效保持在 300ms 内，频繁出现的反馈要更短。
避免 scale(0) 和 UI ease-in，使用有物理感的起点和强缓出曲线。

Reduced motion

前后对比滑杆在减少动态时移除位移、旋转或循环，只保留短淡入和状态对比。