ライブデモ Live Demo

要素がフェードインしながらスケールアップして表示されます。各要素に異なる遅延を設定することで、順番に表示する演出が可能です。

Elements fade in while scaling up. Stagger delays create a sequential reveal effect.

Feature 1

Description

Feature 2

Description

Feature 3

Description

Feature 4

Description

0.6s

AI向け説明 AI Description

`M-003` は `opacity` と `transform: scale()` を同時にアニメーションさせてエントランス効果を作ります。`animation-delay` で各要素の遅延を制御し、順番に表示する演出を実現します。

`M-003` animates both `opacity` and `transform: scale()` simultaneously for entrance effects. Control delays with `animation-delay` to create sequential reveals.

調整可能パラメータ Adjustable Parameters

実装 Implementation

HTML + CSS

<div class="fade-container">
  <div class="fade-item">Item 1</div>
  <div class="fade-item">Item 2</div>
  <div class="fade-item">Item 3</div>
</div>

<style>
:root {
  --fade-duration: 0.6s;
  --scale-from: 0.85;
  --scale-to: 1;
}

.fade-item {
  opacity: 0;
  transform: scale(var(--scale-from));
  animation: fadeScaleIn var(--fade-duration) ease-out forwards;
}

.fade-item:nth-child(2) {
  animation-delay: 0.1s;
}

.fade-item:nth-child(3) {
  animation-delay: 0.2s;
}

@keyframes fadeScaleIn {
  from {
    opacity: 0;
    transform: scale(var(--scale-from));
  }
  to {
    opacity: 1;
    transform: scale(var(--scale-to));
  }
}
</style>

React (JSX + CSS)

// 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);
}

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

以下のテンプレートをコピーしてAIアシスタントに貼り付けると、このパターンの実装を依頼できます。 Copy the template below and paste it into your AI assistant to request an implementation of this pattern.

注意とバリエーション Notes & Variations

スクロールトリガーと組み合わせて、ビューポートに入ったときにアニメーションを開始できます。`prefers-reduced-motion` では即座に表示するように設定してください。

Combine with scroll triggers to start animations when elements enter the viewport. Under `prefers-reduced-motion`, show elements immediately.