CSS トランジション生成

機能

• よく使う六つのプロパティ：transform・opacity・背景色・影・ぼかし・all
• 時間は 0〜3000ms。150〜400ms が快適な範囲です
• 六つのイージング曲線。それぞれ性格と向く場面を明記
• 遅延も調整可能。項目をずらして登場させるのに使います
• プレビューにマウスを乗せると過程が見えます。ボタンは不要です
• 出力は `transition` と `:hover` を二つのルールに分けて書きます
• 下に完全な CSS ルール（`.transition` セレクター付き）を出力
• 計算はすべてブラウザー内で完結します

使い方

1. プロパティを選びます（transform か opacity から始めるのが無難です）
2. 時間とイージングを調整し、プレビューにマウスを乗せて確認します
3. ずらして登場させたいときは遅延を少し足します
4. 良ければ CSS をコピー。`transition` は基本ルール側、変化後の値は `:hover` 側です

よくある質問

ホバーすると アニメーションするのに、離すと戻らないのはなぜですか？

ほぼ確実に `transition` を `:hover` の中に書いています。その書き方だと宣言はホバー中しか効かず、離れたときには存在しないので、ブラウザーには実行するトランジションがなく、瞬間的に戻ります。`transition` は要素の基本ルールに書き、`:hover` には変化後の値だけを書いてください。本ツールが生成するコードがその構造なので、見比べてみてください。

`transition: all` の問題は何ですか？

二つあります。第一に性能 —— `all` はアニメーション可能なすべてのプロパティを監視させるため、動かすつもりのないもの（レイアウトや描画を起こすものもあります）まで対象になり、複雑なページでは目に見えて遅くなります。第二に意図しないアニメーション —— 別の場所で変わった値（レスポンシブな幅、テーマ切替の色）まで遷移し、たいてい不可解な見え方になります。プロパティは明示的に列挙し、`all` は試作段階だけにしてください。

アニメーションしても安全な（コマ落ちしない）プロパティは？

`transform` と `opacity` が定番の安全な二つです —— これらは GPU のコンポジターだけで処理でき、レイアウトも描画も起こしません。一方 `width`・`height`・`top`・`left`・`margin` はレイアウトを、`box-shadow`・`background-color` は描画を起こし、量が増えるとコマ落ちします。移動や拡大は `left`/`width` を変えるのではなく `transform: translate/scale` を優先してください —— 本ツールで transform を最初の選択肢にしている理由でもあります。

時間はどのくらいが適切ですか？

UI のトランジションは 150〜400ms が快適な範囲です —— 待っていると感じない程度に速く、変化が分かる程度に遅い。100ms 未満は瞬間的に見え（トランジションと認識されません）、500ms を超えると待ち始めます。経験則を二つ：要素が大きく移動距離が長いほど少し長めに（大きなものはゆっくり動くべきです）、そして繰り返し起こる操作（ホバー、クリックのフィードバック）はさらに短くしてください。頻繁に見られるためです。