CSS transitionの基本
transitionはCSSプロパティの値が変わるとき、その中間値を一定時間かけて変化させます。本ツールはCSS Transitions Level 1とLevel 2の構文に沿い、property duration timing-function delay [behavior]の固定順で出力します。
durationとdelayの順序
shorthandに時間が2つある場合、1つ目は変化にかかるduration、2つ目は開始オフセットのdelayです。durationは0以上だけが有効ですが、delayは負数も有効です。負のdelayは即時に開始し、その時間分だけ進んだ状態から始まります。
timing-functionと複数指定
定義済みのキーワードのほか、CSS Easing Functionsで定義されるcubic-bezier()、steps()、対応ブラウザではlinear()を入力できます。複数行では各longhandのリスト長を同じにし、CSSのリスト反復や切り捨てに依存しない出力を作ります。
allow-discreteの注意
allow-discreteはdisplayなどの離散プロパティにもtransition開始を許可しますが、通常の連続補間へ変えるものではありません。用途によって@starting-style、top layer、overlay等の追加CSSが必要です。古い環境向けにはbehaviorなしの宣言を先に置く互換用CSSも表示します。
よくある質問
CSS transitionとは？
CSSプロパティの値が変わる際に、中間値を一定時間かけて変化させる仕組みです。
transitionの基本設定は？
property、duration、timing-function、delayの4設定が基本で、Level 2ではbehaviorも加わります。
durationとdelayの違いは？
durationは変化にかかる時間、delayは変化を開始する時点のオフセットです。
delayはマイナスにできますか？
できます。負のdelayではtransitionはすぐ開始し、指定時間分だけ進んだ状態から始まります。
durationはマイナスにできますか？
できません。負のtransition-durationは無効ですが、0sは有効です。
transitionの時間を2つ書いた場合は？
1つ目がduration、2つ目がdelayです。たとえばopacity 1s ease 2sはdurationが1s、delayが2sです。
allと個別propertyはどちらがよい？
allは複数のtransitionable propertyをまとめて対象にできます。意図する対象を明確にしたい場合は個別指定します。
allow-discreteとは？
display等の離散プロパティにもtransition開始を許可するLevel 2の値です。連続補間になるとは限らず、用途により@starting-style等も必要です。
cubic-bezierを作れますか？
カスタム欄へ直接入力できます。曲線を視覚的に細かく作る場合はCSS cubic-bezierジェネレーターを利用してください。
入力内容は送信されますか？
送信・保存されません。生成・プレビューはブラウザ内で行い、Cookie・localStorage・sessionStorage・IndexedDB・URLへ設定を保存しません。