6XC

CSSトランジション ジェネレーター

プロパティ・時間・タイミング関数・遅延を設定してtransitionを組み立て、ワンクリックでライブテストできます。

914回閲覧

transitionプロパティ

構文: transition: プロパティ 時間 タイミング関数 遅延。ホバー・フォーカス・クラスの切り替えによって発生する変化をアニメーションします。タイミング関数は動きの質感を決めます: easeは自然な標準値、ease-outは登場アニメーションに向き、独自のcubic-bezier曲線を使うと弾むようなオーバーシュートを表現できます。テストボタンを押して設定の動きを確認してください。

よくある質問

アニメーションに負荷が少ないプロパティはどれですか?

transformとopacityです — ブラウザはレイアウトの再計算なしにGPU上で合成できます。width、height、topをアニメーションさせるとフレームごとにレイアウト計算が発生し、カクつきの原因になります。

適切なデフォルトの時間はどれくらいですか?

小さなUIフィードバック(ボタンやホバー)には150〜250ms、より大きな動きには300〜500msが目安です。約700msを超えると動作が鈍く感じられます。

関連ツール

CSSグラデーション ジェネレーター ライブプレビューを見ながら線形・放射状・円錐形のCSSグラデーションをデザインし、コードをコピーできます。 使ってみる CSS Box Shadow(ボックスシャドウ)ジェネレーター オフセット・ぼかし・広がり・色・不透明度・内側影(inset)をビジュアルに調整し、ライブプレビューで影をデザインします。 使ってみる CSS Border Radiusジェネレーター 各角を個別に、または一括でpxか%で丸め、ライブプレビューとコピー可能なCSSを確認できます。 使ってみる CSSテキストシャドウ ジェネレーター オフセット・ぼかし・色・不透明度を調整してtext-shadowをデザインし、サンプルテキストでライブプレビューできます。 使ってみる