捲動驅動 CSS 動畫產生器

產生 reveal、捲動進度與 parallax CSS，附可捲動沙箱、執行時支援檢查及減少動態效果保護。

scroll-animations本機處理

正在啟用本機工具…

效果Class 前綴距離（px，0–200）Easing

減少動態效果保護永遠啟用；不支援 timeline 時內容仍可見。進度條僅供裝飾，fallback 隱藏。動畫依捲動位置，不使用秒數。

捲動沙箱與 CSS

啟用後檢查目前瀏覽器支援。

在預覽內捲動；按 Tab 聚焦內部區域後，可用方向鍵或 Page Down。支援檢查不代表視覺驗證。

CSS

預覽最多 32,000 字元；複製、下載與展開文字均保留完整內容。複製失敗時可選取完整文字。

.scroll-demo-scroller { overflow: auto; block-size: 24rem; position: relative; }
.scroll-demo-item, .scroll-demo-layer { opacity: 1; transform: none; }
.scroll-demo-progress { display: none; position: sticky; top: 0; height: 6px; background: #2563eb; transform-origin: left center; z-index: 1; }
/* Content is visible when timelines are unsupported or motion is reduced. */
@media (prefers-reduced-motion: no-preference) {
  @supports ((animation-timeline: view(block)) and (animation-range: entry 0% entry 100%)) {
    @keyframes scroll-demo-motion {
      from { opacity: 0; transform: translateY(48px); }
    to { opacity: 1; transform: none; }
    }
    .scroll-demo-item {
      animation: scroll-demo-motion auto ease-out both;
      animation-timeline: view(block);
      animation-range: entry 0% entry 100%;
    }
  }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-demo-item, .scroll-demo-layer { animation: none; opacity: 1; transform: none; }
  .scroll-demo-progress { display: none; animation: none; }
}

展開可選取的完整文字

.scroll-demo-scroller { overflow: auto; block-size: 24rem; position: relative; }
.scroll-demo-item, .scroll-demo-layer { opacity: 1; transform: none; }
.scroll-demo-progress { display: none; position: sticky; top: 0; height: 6px; background: #2563eb; transform-origin: left center; z-index: 1; }
/* Content is visible when timelines are unsupported or motion is reduced. */
@media (prefers-reduced-motion: no-preference) {
  @supports ((animation-timeline: view(block)) and (animation-range: entry 0% entry 100%)) {
    @keyframes scroll-demo-motion {
      from { opacity: 0; transform: translateY(48px); }
    to { opacity: 1; transform: none; }
    }
    .scroll-demo-item {
      animation: scroll-demo-motion auto ease-out both;
      animation-timeline: view(block);
      animation-range: entry 0% entry 100%;
    }
  }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-demo-item, .scroll-demo-layer { animation: none; opacity: 1; transform: none; }
  .scroll-demo-progress { display: none; animation: none; }
}

示範 HTML

預覽最多 32,000 字元；複製、下載與展開文字均保留完整內容。複製失敗時可選取完整文字。

<div class="scroll-demo-scroller" tabindex="0" role="region" aria-label="Scroll animation demo">
  <div class="scroll-demo-progress" aria-hidden="true"></div>
  <article class="scroll-demo-item"><div class="scroll-demo-layer">Your content</div></article>
  <!-- Add enough content to make this container scroll. -->
</div>

展開可選取的完整文字

<div class="scroll-demo-scroller" tabindex="0" role="region" aria-label="Scroll animation demo">
  <div class="scroll-demo-progress" aria-hidden="true"></div>
  <article class="scroll-demo-item"><div class="scroll-demo-layer">Your content</div></article>
  <!-- Add enough content to make this container scroll. -->
</div>

操作與限制

選效果、class 前綴、距離與 easing。在隔離預覽內捲動或以鍵盤聚焦，複製 CSS 與示範標記。產生的容器使用原生 view() 或 scroll(nearest block) timeline。

CSS.supports 只檢查目前瀏覽器語法支援，不證明視覺正確或所有版本均支援。不支援或減少動態效果環境保留可見內容，隱藏裝飾性進度條。不含 JavaScript polyfill；動畫依捲動位置進行，不以秒數控制。

來源

如何使用這個工具