jquery.app
日本語
EnglishDeutschFrancaisEspanol日本語Nederlands

CSSツール

無料 CSS progress()関数カリキュレーター

スクロール駆動アニメーションと値マッピングのためのCSS progress()関数の値を計算します。

ツールを読み込み中...

CSS progress()関数カリキュレーターとは

The CSS progress() function is a mathematical mapping function (Chrome 138+) that converts an input value from one numeric range into a 0-1 progress value. For example, progress(scroll-position from 0 to 500) returns 0 when the scroll position is 0, 1 when it reaches 500, and 0.5 at 250. This progress value can drive any numeric CSS property, eliminating complex calc() chains for scroll-linked effects, viewport-relative sizing, and custom property interpolation.

クイックアンサー

Use CSS progress(input from min to max) to map any numeric value to a 0-1 progress range. Drive opacity, scale, transform, color-mix percentages, or any number-accepting CSS property based on scroll position, viewport dimensions, or custom properties. Chrome 138+. Wrap in clamp(0, ..., 1) to bound the output.

制限事項

  • progress() requires Chrome 138+. Firefox, Safari, and older Chrome versions do not support it. Use scroll-driven animation keyframes or JavaScript-based scroll listeners as fallbacks for cross-browser support.
  • The function only works with numeric CSS properties. It cannot directly drive color stops, gradient angles, or shape functions. For color transitions, combine progress() with color-mix() using the progress value as the mixing percentage.
  • scroll-position in progress() measures the document scroll position by default, not an element's scroll container. Use self-scroll-position for a specific scroll container, but ensure the container is scrollable and has a defined scroll range.

使い方

  1. Enter the input source and its range — choose from scroll-position, viewport width/height, viewport inline/block size, or a custom CSS property with its minimum and maximum values.
  2. Set the target CSS property you want to drive and its value at progress 0 and progress 1 — for example opacity 0 to 1, or scale 0.5 to 1.5.
  3. Optionally enable clamp() wrapping to keep the result bounded within the output range even when the input exceeds the defined range.
  4. Copy the generated CSS and add it to your stylesheet. The output includes both the progress() rule and the full property declaration.

主な用途

  • Drive a sticky header's opacity from fully transparent to opaque as the user scrolls from 0 to 200 pixels down the page.
  • Scale a hero image from 1 to 1.2 as the viewport width grows from 320px to 1920px, creating a subtle zoom effect on wider screens.
  • Control a color-mix() mixing percentage to transition from one color to another based on how far through a section the user has scrolled.

用途

使用例

例

Fade-in on scroll with progress()

A hero section should fade in as the user scrolls the first 300 pixels. Use progress(scroll-position from 0 to 300) mapped to opacity: the element is fully transparent at the top of the page (progress=0) and fully opaque after 300px of scroll (progress=1). No IntersectionObserver or scroll event listener needed.

例

Responsive card scale by viewport

A card grid should scale each card from 0.9 at 320px viewport width to 1.1 at 1440px. Use progress(100vw from 320 to 1440) as the input with scale as the target property. The cards subtly grow as the viewport widens, creating a responsive grid without media queries.

よくあるミス

  • Using progress() without realizing it returns a raw 0-1 value — most properties need an additional calc() or scaling to convert progress into the desired output range, but the tool handles this mapping for you.
  • Forgetting that scroll-position is relative to the document scroll position by default — for an element's scroll container, use progress(self-scroll-position from 0 to N) instead.
  • Assuming progress() works in all CSS properties — it works in any property that accepts a number or percentage, but does not work in color functions like rgb() directly (use color-mix() instead).

検証

  1. Inspect the element in DevTools and confirm the computed value of the target property matches the expected value at known input positions (e.g., scroll exactly 200px and check opacity is 0.5 for a 0-to-400 range).
  2. Test the edge cases: verify the property value at the minimum and maximum input range boundaries, and test with an input value beyond the range to confirm clamp() behavior if wrapping is enabled.

FAQ

CSS progress()関数カリキュレーターのFAQ

How is progress() different from scroll-driven animation timelines with view-timeline?

progress() is a pure mathematical function that maps one numeric range to 0-1 — it has no link to animation timelines, keyframes, or animation-range. Use progress() for declarative value mapping in any CSS property without creating a scroll-timeline. Use view-timeline and animation-range when you need full keyframe-based scroll-driven animations with multiple steps, easing, and direction control.

What happens when the input value is outside the defined range?

progress() returns values outside 0-1 when the input is outside the from-to range. For example, progress(x from 0 to 100) returns 1.5 when x=150. Wrap the result in clamp(0, ..., 1) to bound the output. This tool includes an optional clamp() wrapping toggle to handle this automatically.

Can progress() reference custom properties as input?

Yes. You can use any CSS custom property as the input value, such as progress(--scroll-offset from 0 to 500). This is useful when you want to drive a value based on JavaScript-set custom properties or when chaining multiple progress() calculations together through intermediate custom properties.

関連ツール

その他のcssツール

こちらもお試しください

こちらもお試しください