CSSモーションジェネレーター

CSSモーションを4つのモードで作成

CSSの動きは、連続したキーフレームを再生するanimation、状態変化を滑らかにするtransition、要素を移動・回転・拡大するtransform、進み方を決めるcubic-bezier()を組み合わせて設計します。このページでは、用途ごとの入力と結果だけを上部のモードで切り替えられます。

アニメーションとトランジション

アニメーションモードは@keyframesとanimationのshorthand・longhandを生成し、同じ設定をWeb Animations APIでプレビューします。トランジションモードは複数プロパティ、duration、delay、timing-function、allow-discreteを設定し、shorthand・longhand・互換用CSSを生成します。

transitionの時間指定は、1つ目がduration、2つ目がdelayです。durationは負数にできませんが、負のdelayは途中時点から変化を始める指定として有効です。allow-discreteは離散プロパティを連続補間へ変えるものではなく、必要に応じて@starting-styleなども検討してください。

変形とイージング

変形モードはtranslate、rotate、scale、skew、matrixを並べた順番どおりに組み立て、transform-originも設定できます。生成コード、プレビュー、コピー内容は常に同じ順番です。transform関数は左から右へ順番に掛け合わされるため、並びが違えば結果も同一ではありません。

translateの%は要素自身のreference boxの幅、高さが基準で、画面や親要素全体の50%ではありません。scaleX(-1)は反転に使え、scaleが0の変形はnon-invertibleとなり表示されなくなる場合があります。transformは通常のCSS layout flowで周囲の要素を再配置しないため、はみ出しやoverflowにも注意してください。translate3d、rotateX/Y/Z、scale3d、perspective、matrix3dなどの3D transformは対象外です。

イージングモードは制御点を数値とスライダーで調整し、グラフと実際のCSS transitionで動きを確認できます。x1とx2は0〜1必須ですが、y1とy2は負数や1を超える有限値も有効です。

仕様に沿った安全な出力

入力値を検証し、HTMLとして解釈せず安全に表示します。構文はCSS Animations、CSS Transitions、CSS Transforms、CSS Easing Functionsを基準にしています。