CSSトランジションとキーフレーム：コピーできる20の例
ホーム CSSトランジション・プレイグラウンド
CSSトランジションとキーフレーム：20のライブサンプル | We.Inc
スライダーで時間、遅延、イージングを調整し、描画される ベジェ曲線を確認できます。トランジションと @keyframes を比較し、動きを減らす設定に配慮した20のホバー時のマイクロインタラクションをコピーできます。
CSSトランジションは、ホバー時など値が変化したときにプロパティを滑らかにアニメーションさせます。例：transition: transform 200ms ease-out。開始と終了の状態が必要で、変化のたびに1回実行されます。@keyframes アニメーションは独自のステップを定義し、ループでき、状態の変化がなくても開始します。最も滑らかな結果を得るには、変形を扱う transform と不透明度を扱う opacity をアニメーションさせましょう。
トランジションの各部分
ease-out または cubic-bezier(.2,.8,.2,1) プレイグラウンドでは、選んだプロパティ、時間、遅延、イージングで実際の要素を2つの状態の間でアニメーションさせ、イージングを曲線として描画します。これを見れば、減速型の ease-out がきびきび感じられ、加速型の ease-in がもたついて感じられる理由がわかります。さらに下には、その場で編集してどのサイトにも貼り付けられる、20のホバーとフォーカスの効果があります。
アニメーションさせるプロパティを選びます：移動、拡大縮小、回転、色、不透明度。 スライダーで時間と遅延を設定し、イージングのプリセットを選ぶか、ベジェ曲線の4つの数値をドラッグします。 「再生」を押して2つの状態を切り替え、曲線の横で結果を確認します。 トランジションの行をコピーしたら、下にある20のマイクロインタラクションから好きなものを取り入れましょう。 UIのフィードバックは、およそ100〜300ミリ秒なら瞬時に感じられます。ホバーで0.5秒を超えると遅く感じ始めます。 画面に現れるものやポインターに反応するものには減速する ease-out、画面から消えていくものには加速する ease-in、ある場所から別の場所へ移動するものには両端がゆるやかな ease-in-out を使いましょう。 すべてを対象にする transition: all と書かずに、アニメーションさせるプロパティを列挙しましょう。そうすれば、関係のない変化が予期せずアニメーションすることはありません。 動きは prefers-reduced-motion のチェックで囲み、動きを減らしたい人には、より穏やかなフェードかアニメーションなしを提供しましょう。 よくある質問
トランジションとアニメーションの違いは何ですか？
トランジションは、クラスの追加やホバーの開始などの値の変化に反応し、古い値から新しい値へ移るだけです。アニメーションは @keyframes を使い、多くのステップを持て、繰り返しや往復ができ、適用された時点で実行されます。状態の変化にはトランジションを、ローディング表示や注意を引く演出にはキーフレームを使いましょう。
トランジションが動かないのはなぜですか？
よくある原因は次のとおりです。プロパティがアニメーション可能でない（display は離散的なアニメーションの指定が登場するまでそうでした）、開始値が auto である（height: auto は新しい機能なしでは補間できません）、要素が挿入されたばかりで以前のスタイルがない、トランジションがホバー状態にしか宣言されておらず、マウスが離れたときに一瞬で戻ってしまう、などです。
アニメーションさせても負荷が軽いプロパティはどれですか？
transform と opacity は、通常レイアウトの再計算や再描画なしにコンポジターで処理できるため、滑らかに動きます。幅、高さ、位置、余白（width、height、top、left、margin）をアニメーションさせると毎フレームでレイアウトが発生し、影やフィルター（box-shadow、filter）は再描画を引き起こすため、性能の低いスマートフォンではカクつくことがあります。
cubic-bezier（3次ベジェ曲線）とはどういう意味ですか？
2つの制御点 cubic-bezier(x1, y1, x2, y2) でイージングの曲線を表します。x の値は時間で、0から1の間に収める必要があります。y の値は進行度で、その範囲を超えてもよく、超えると行き過ぎや小さな跳ね返りが生まれます。
動きを減らす設定に配慮するにはどうすればいいですか？
メディアクエリ @media (prefers-reduced-motion: reduce) を使って、動きを短くするか取り除きます。簡単な方法は、色や不透明度の変化は残して変形（transform）をなくすか、そのクエリ内で transition-duration と animation-duration をごく小さな値に設定することです。
イージング曲線の読み方
イージング曲線の横軸は時間、縦軸は進行度です。立ち上がりが急なら動きの大部分が早い段階で起こり、それが ease-out の反応のよい感覚を生みます。立ち上がりが平らなら要素は最初にためらうため、ホバーに加速型を使うと、反応が遅れているように感じられるのです。 等速の linear はまっすぐな対角線で、移動に使うと機械的に見えますが、スピナーや色の循環には適しています。段階的に進む steps(4) は、滑らかに動く代わりに4回の均等なジャンプで進むため、スプライトシートやタイピング風の効果に便利です。 トランジションとキーフレームのどちらを使うか
状態が2つあり、ユーザーの操作で変化する場合はトランジションを選びましょう。ホバー、フォーカス、開いた状態、選択された状態などです。ブラウザーが中間のフレームを計算し、途中で状態が戻っても滑らかに逆再生します。 動きが3ステップ以上ある場合、ループさせたい場合、ページの読み込み時に自動で再生したい場合は @keyframes を選びましょう。animation-fill-mode: both を指定すると、遅延中は最初のフレームが、終了後は最後のフレームが適用されたままになり、ちらつきを防げます。 display: none との間でアニメーションさせる
新しいブラウザーでは、transition-behavior: allow-discrete を追加すると display と overlay をトランジションに含められます。また @starting-style を使うと、最初のレンダリング時のアニメーション開始スタイルを要素に指定できます。この2つを組み合わせれば、スクリプトなしでポップオーバーやダイアログをフェードイン・フェードアウトできます。 これらのサポートは2023年から2024年にかけて導入されたもので、古いバージョンでは対応がまちまちです。そのため、付加的な改善として扱いましょう。対応していない場合、要素は単に瞬時に表示・非表示になるだけです。 トランジションとキーフレームをひと目で比較
どちらをいつ使うか
開始のタイミング プロパティの値が変化したとき アニメーションが適用されたとき 繰り返し 不可 animation-iteration-count（infinite を含む） 向いている用途 ホバー、フォーカス、開いた状態、選択された状態 ローディング表示、注意を引く演出、登場時の効果 各プロパティをアニメーションさせるコスト
1フレームあたりのレンダリング処理（一般的な目安、ブラウザーにより異なる）
transform, opacity なし なし 通常は該当 color, background-color なし あり 該当しない box-shadow, filter なし あり 該当しない width, height, padding, margin あり あり 該当しない top, left（位置指定あり） あり あり 該当しない 動きを減らす設定のためのセーフティネット
状態の変化は残しつつ、移動をなくします。スタイルシートの末尾近くに置いてください。
@starting-style でポップオーバーをフェードイン・フェードアウトする
上で紹介した2つの新しい機能に対応したブラウザー向けの付加的な改善です。それ以外のブラウザーでは瞬時に表示・非表示になります。
コピーできる20のマイクロインタラクション
各結果にホバーまたはフォーカスすると動作を確認できます。どのスニペットも最後に動きを減らす設定のルールが入っています。
カードの浮き上がり
カードを持ち上げ、影を濃くします。
ボタンの拡大
ホバーで少し拡大し、クリックで押し込まれます。
スライドする下線
背景サイズを使って、線が左から伸びます。
色の塗りつぶし
背景色と文字色が同時に入れ替わります。
矢印の小さな移動
ラベルは動かず、アイコンだけが動きます。
アイコンの回転
プラスがバツに変わります。
フォーカスリングのフェード
キーボード操作のユーザー向けに、アウトラインのオフセットがアニメーションします。
枠内での画像ズーム
画像は拡大しますが、枠からはみ出た部分は切り取られます。
キャプションの表示
キャプションが下端からスライドして現れます。
やわらかな光
色付きの影がフェードインします。
わずかな傾き
数度回転させるだけで、ステッカーが気軽に貼られたような印象になります。
枠線の描画
枠線の色がグレーからブランドの青に変わります。
ほかの項目を暗くする
1つの項目にホバーすると、隣の項目が薄くなります。
光のスイープ
ホバーすると光の帯が横切ります。
スイッチのつまみ
チェックボックスをスイッチ風にし、つまみがスライドします。
アコーディオンの山形矢印
折りたたみ要素（details）が開くとマーカーが回転します。
脈打つドット（キーフレーム）
キーフレームで作った、ループするステータス表示のドットです。
スピナー（キーフレーム）
等速の linear タイミングで、回転の速さを一定に保ちます。
読み込み時のフェードアップ（キーフレーム）
塗りつぶしモード（fill-mode）を both にすると、遅延中は非表示のままになります。
エラー時の揺れ（キーフレーム）
短い横揺れで、ここではホバー時に1回再生されます。
イージング曲線 cubic-bezier({values})
トランジション・プレイグラウンド
順方向に再生
逆方向に再生
お使いの端末で動きを減らす設定がオンになっているため、プレビューは動かずに切り替わります。
アニメーションさせるプロパティ
時間：{n}ms
遅延：{n}ms
イージングのプリセット
CSSをコピー
無料で始める · クレジットカード不要
関連: ガイド｜Webマーケティングと集客を学ぶ
製品
ご利用いただける方
機能
リソース
会社情報
サイトマップを見る