CSS登場アニメーションジェネレーター

CSS登場アニメーションジェネレーター: 用途

効果、長さ、イージング（推奨の強いease-outを含む）、距離、項目ごとの遅延を選びます。プレビューでは、6つのブロックが登場する様子を確認でき、繰り返すこともできます。

コードは、opacityとtransformのトランジション、要素が画面に現れたときにアニメーションさせるIntersectionObserver、動きを減らしたい人向けの移動なしバージョンを使っています。JavaScriptがなくても、コンテンツは通常どおり表示されます。

使い方

1. 効果、長さ、イージングを選びます。
2. 距離と遅延を調整して、プレビューを確認します。
3. CSSとスクリプトをコピーして、animaクラスを使います。

使うタイミング

• スクロールで現れるランディングページのセクション。
• サービスや商品のカードを順番に表示する。
• コーポレートサイトの仕上げ。

よくある質問

どのくらいの長さにすればよいですか？

インターフェースの要素なら150〜300ミリ秒です。紹介ページのセクションなら、600ミリ秒程度までは自然に見えます。長すぎるアニメーションは、サイトを遅く感じさせます。

どのイージングを選べばよいですか？

画面に入ってくるものには、最後に減速するカーブ（cubic-bezier(0.23, 1, 0.32, 1)のような強いease-out）を使います。動きは速く始まり、なめらかに落ち着きます。登場にease-inは避けてください。まさに始まりが遅くなってしまいます。

動きが苦手な人にはどうなりますか？

コードはシステムの視差効果を減らす設定（prefers-reduced-motion）を尊重します。要素は移動せず、短いフェードだけで表示されます。

スクロール時のモードはどう動作しますか？

IntersectionObserverが、要素が画面に入ったときにvisivelクラスを追加します。JavaScriptがなければ、要素はアニメーションなしで通常どおり表示されます。

本当に無料？

はい、100%無料です。登録不要、サブスクなし、利用制限なし。すべてのツール：Tools123は無料です。

関連ツール