M-003 Animation simple

How to create a fade scale animation フェードスケールアニメーションの作り方

Elements fade in while scaling up for entrance animations with staggered delays. 要素がフェードインしながらスケールアップして表示されるエントランスアニメーション。

fade scale entrance stagger

ライブデモ Live Demo

Feature 1

Description

Feature 2

Description

Feature 3

Description

Feature 4

Description

0.6s

概要・用途・特徴Overview, Usage & Features

何ができるかWhat it does

Elements fade in while scaling up for entrance animations with staggered delays.

要素がフェードインしながらスケールアップして表示されるエントランスアニメーション。

どこで使うかWhere to use

hero section, micro interaction, visual feedback, brand expression

コンテンツセクション、カードグリッド、ランディングページ、ポートフォリオサイト

特徴Key features

Combines opacity fade with scale transform for a polished entrance animation. Triggered by IntersectionObserver so elements animate only when scrolled into view. CSS custom properties control timing and easing. Zero dependencies.

opacity フェードとscaleトランスフォームを組み合わせた洗練された登場アニメーション。IntersectionObserverでスクロール時にのみ発火。タイミングとイージングはCSSカスタムプロパティで制御。依存ライブラリなし。

調整可能パラメータ Adjustable Parameters

Parameter Default Description
--fade-duration—fade-in animation duration
--scale-from / --scale-to—scale start and end values
--delay-step—delay interval between items
easing function—change easing function (ease-out, cubic-bezier, etc.)

実装コード Implementation Code 

// react/M-003.jsx
import { useEffect, useState } from "react";
import "./M-003.css";

export default function FadeScaleAnimation({ items }) {
  const [isVisible, setIsVisible] = useState(false);

  useEffect(() => {
    setIsVisible(true);
  }, []);

  return (
    <div className="fade-container">
      {items.map((item, index) => (
        <div
          key={item.id}
          className={`fade-item ${isVisible ? "visible" : ""}`}
          style={{
            animationDelay: `${index * 0.1}s`,
            ["--fade-duration"]: "0.6s"
          }}
        >
          {item.content}
        </div>
      ))}
    </div>
  );
}
/* react/M-003.css */
.fade-item {
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-item.visible {
  opacity: 1;
  transform: scale(1);
}
import { useEffect, useState } from "react";
import "./M-003.css";

export default function FadeScaleAnimation({ items = [] }) {
  const [isVisible, setIsVisible] = useState(false);

  useEffect(() => {
    setIsVisible(true);
  }, []);

  const defaultItems = [
    { id: 1, title: "Feature 1", description: "Description" },
    { id: 2, title: "Feature 2", description: "Description" },
    { id: 3, title: "Feature 3", description: "Description" },
    { id: 4, title: "Feature 4", description: "Description" }
  ];

  const displayItems = items.length > 0 ? items : defaultItems;

  return (
    <div className="fade-container">
      {displayItems.map((item, index) => (
        <div
          key={item.id}
          className={`fade-item ${isVisible ? "visible" : ""}`}
          style={{
            animationDelay: `${index * 0.1}s`,
            ["--fade-duration"]: "0.6s"
          }}
        >
          <h4>{item.title}</h4>
          <p>{item.description}</p>
        </div>
      ))}
    </div>
  );
}
/* Fade animation styles are now in global.css */

仕組みとカスタマイズHow It Works & Customization

仕組みHow it works

Elements start at opacity: 0 and transform: scale(0.95). When they enter the viewport, IntersectionObserver adds a class that transitions both properties to their final values (opacity: 1, scale: 1). A stagger delay is optionally applied via --reveal-delay for sequential animations.

要素はopacity:0、transform:scale(0.95)の初期状態でレンダリングされます。ビューポートに入るとIntersectionObserverがクラスを追加し、opacity:1・scale:1へトランジション。--reveal-delayで順次アニメーションのスタッガー遅延をオプション適用できます。

カスタマイズ方法Customization

Swap scale for translateY to create a rise-in effect instead. Increase --reveal-delay to stagger multiple cards sequentially. Adjust --reveal-duration for a faster snappy or slower dramatic entrance.

scaleをtranslateYに変えると上昇アニメーションになります。--reveal-delayを増やして複数カードを順次アニメーション。--reveal-durationで速いスナッピーなまたは遅いドラマチックな入場を調整。

注意点Caveats

Set once: true on the IntersectionObserver to prevent repeated re-animation on scroll up/down. Provide a no-motion fallback (opacity: 1, transform: none) for prefers-reduced-motion users.

IntersectionObserverにonce: trueを設定し、スクロール時の繰り返しアニメーションを防止してください。prefers-reduced-motionユーザー向けにopacity:1・transform:noneのフォールバックを提供してください。

よくある質問 Frequently Asked Questions

How to customize the fade scale animation? Fade Scale Animationをカスタマイズするには？

Modify the CSS custom properties and class styles defined in the code section. Key adjustable values include colors, sizes, durations, and spacing. See the Adjustable Parameters section for specific variables.

コードセクションで定義されているCSSカスタムプロパティとクラススタイルを変更してください。色、サイズ、時間、間隔が主な調整可能値です。具体的な変数は調整可能パラメータセクションを参照してください。

How to use the fade scale animation in React? ReactでFade Scale Animationを使うには？

Import the provided React component and its CSS file. The component accepts props for customization. Check the React code section for the full implementation and available props.

提供されているReactコンポーネントとCSSファイルをインポートしてください。コンポーネントのpropsでカスタマイズできます。完全な実装と利用可能なpropsはReactコードセクションを参照してください。

What are the performance implications of fade scale animation? Fade Scale Animationのパフォーマンスへの影響は？

This implementation uses CSS transforms and opacity for animations, which are GPU-accelerated. It's lightweight and doesn't cause layout thrashing. Consider using prefers-reduced-motion for accessibility.

この実装はCSSのtransformとopacityを使用しており、GPUアクセラレーションされます。軽量でレイアウトスラッシングを引き起こしません。アクセシビリティのためにprefers-reduced-motionの使用を検討してください。

AIへの指示テンプレート AI Prompt Template

以下をAIに貼り付けると実装を依頼できます。 Paste the following into your AI assistant to request implementation.