CSS Transition Generator

使い方

1. 遷移させるプロパティを選びます：all・opacity・transform・background-color・color・width・height・border-radius・box-shadow、またはカスタム名。
2. 再生時間（ms）を 0〜10000 で設定します。
3. 待ってから始めたい場合は遅延（ms）を設定します。
4. イージングを選びます：linear・ease・ease-in・ease-out・ease-in-out、または 4 つの数値によるカスタム cubic-bezier。
5. カーブを見ます。x1 と x2 は 0〜1 に収める必要があり、y1 と y2 は範囲外にして跳ね返る効果を作れます。
6. デモを再生で四角を 2 つの状態で切り替え、CSS をコピーします。

こんなときに

• ボタン・カードのホバー: transform や background-color に 150〜300 ms の遷移。
• メニュー・ドロワーの展開: 入场は長めの時間に ease-out。
• 時間差の表示: 長さを延ばさず、項目ごとに遅延を置く。
• イージングの比較: 同じ動きで ease-in とカスタム cubic-bezier を比べる。
• モーションの記録: 決められた数値を 1 行の transition CSS として開発に渡す。

プライバシーについて

プロパティ名・時間・イージングの数値はこのページ内で CSS 文字列に組み立てられ、デモのアニメーションはローカルの要素に対してだけ動きます。データの送信はなく、オフラインでも動作します。

FAQ

Q: 対応するイージングの値は？ A: linear・ease・ease-in・ease-out・ease-in-out のキーワードと、4 つの数値のカスタム cubic-bezier です。カーブは CSS 仕様で定義された各キーワードの標準 cubic-bezier 等価形式で描画されます。

Q: 遅延の役割は？ A: プロパティが変化してから、指定したミリ秒待ってから遷移が始まります。出力には 0ms を含めて常に遅延を明記するので、簡潔な記法のまま読みやすさを保ちます。

Q: カスタムプロパティを遷移できますか？ A: custom を選び、filter や grid-template-rows などのプロパティ名を入力します。カンマ区切りで複数も指定可能です。ツールが検査するのは名前の形式だけで、実際に遷移できるかはブラウザ依存です。補間できるプロパティだけが滑らかに動きます。

Q: デモの一部の変化が即座に切り替わるのは？ A: 再生ボタンは transform・背景色・不透明度・丸め・幅を同時に変えます。1 つのプロパティだけを選ぶと、その項目だけが遷移し、他は瞬間的に切り替わります。プロパティの選択が重要であることがこれで分かります。