动画 · 滚动触发 · 11

滚动揭示

滚动揭示 = 内容随滚动位置按比例显现，用原生 CSS animation-timeline 实现，无需 JavaScript。

Revealed on scroll

尊重 prefers-reduced-motion：动画关闭，仅保留终态。

怎么向 AI 描述它

Reveal a panel on scroll with native CSS: animation-timeline: view(), fade + translateY tied to scroll position, transform and opacity only.

Narrow the reveal range to the first 40% of the element's view so the motion is quick and local.

Use animation-timeline: view() with animation-range: entry 0% cover 40% so the panel settles early, add a fallback @supports check for browsers without scroll-driven animation (reveal on inview via IO), and under prefers-reduced-motion show it at rest. Expose --reveal-distance.

修改类 Prompt 只动目标，不碰页面其余部分。

滚动揭示是什么？

滚动揭示把动效绑在滚动位置：面板滑过视口时淡入上移。现代做法是原生 CSS 滚动驱动动画（animation-timeline: view()），跑在合成层、零 JS。揭示区间要短，让效果落在元素附近而非整页。

动画标本

触发: scroll
技术: scroll-driven
时长: 2.6s
缓动: cubic-bezier(0.16, 1, 0.3, 1)
性能: transform, opacity

什么时候用

Long-form sections, feature blocks, story pages
Any scroll-linked reveal where JS would be overkill

什么时候别用

Above the fold — scroll-linked motion there never triggers
When you need scrubbed precision JS gives but CSS lacks

Native scroll-driven animation needs no scroll listener and stays on the compositor — but add an @supports fallback for older browsers.

获取代码

.anim-el {
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}
:root { --anim-accent: #6d5efc; }

.scroll-demo { width: min(240px, 100%); height: 150px; border-radius: 12px; overflow: hidden; border: 1px solid var(--border, #e6e7ec); background: var(--surface, #fff); position: relative; }
.scroll-track { position: absolute; inset: 0; display: grid; place-items: center; }
.scroll-panel {
  animation-name: reveal;
  animation-duration: var(--anim-duration, 2.6s);
  animation-timing-function: var(--anim-easing, cubic-bezier(0.16, 1, 0.3, 1));
  width: 150px;
  padding: 16px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--anim-accent) 12%, #fff);
  border: 1px solid color-mix(in srgb, var(--anim-accent) 30%, #e6e7ec);
  color: var(--ink, #1a1c22);
  font: 600 13px/1.4 'Plus Jakarta Sans', system-ui, sans-serif;
  text-align: center;
}
@keyframes reveal {
  0% { opacity: 0; transform: translateY(46px); }
  30%, 100% { opacity: 1; transform: translateY(0); }
}

<div class="scroll-demo">
  <div class="scroll-track"><div class="scroll-panel anim-el">Revealed on scroll</div></div>
</div>

复制后即可用于你的项目。动效仅作用于 transform / opacity；颜色取自 --anim-accent。

另见

风格

玻璃拟态→

主题

AI SaaS 落地页→

组件

卡片→

滚动揭示

滚动揭示是什么？

动画标本

什么时候用

什么时候别用

另见

组件

动画

风格

主题

Prompt

术语

反模式

滚动揭示

滚动揭示是什么？

动画 标本

什么时候用

什么时候别用

另见

动画标本