CSS animationと@keyframes
@keyframesは時間軸上の各地点の見た目を定義し、animationは時間・反復・方向などを要素へ割り当てます。本ツールはCSS Animations、CSS Easing Functionsの構文に沿って出力します。
安全な値とプレビュー
animation名と各値を制限・検証し、transformはtranslateX translateY rotate scaleの順で統合します。プレビューは動的なstyle要素を作らず、Web Animations APIへ同じkeyframeを渡します。
duration、delay、iteration
durationは0以上で、0sも有効です。delayは負数を指定でき、開始時点を進められます。iteration-countは0以上の小数またはinfiniteを利用できます。
よくある質問
CSS animationとは？
@keyframesで定義した複数の状態を、時間・反復・方向などの設定で再生するCSS機能です。
@keyframesとは？
0%から100%までのoffsetごとに、アニメーション中のプロパティ値を定義する規則です。
durationを0にできますか？
はい。0sは有効です。負のdurationは無効です。
delayは負数にできますか？
はい。負のdelayでは、指定した時間だけ進んだ時点から開始します。
iteration-countに小数を使えますか？
はい。0以上の小数やinfiniteを指定できます。
directionのalternateとは？
反復ごとに再生方向を交互に切り替えます。
fill-modeとは？
再生前後にどのkeyframeの値を適用するかを指定します。
0%と100%は省略できますか？
CSS仕様上は省略時に要素の計算値が使われますが、本ツールでは明示的で再現しやすい出力のため必須にしています。
同じoffsetを複数作れますか？
本ツールでは編集結果を一意にするため、重複offsetを受け付けません。
複数animationを一度に作れますか？
いいえ。1ページ1目的として、1つのanimationとkeyframesだけを生成します。
入力内容は送信されますか？
送信・保存されません。設定・生成・プレビューはブラウザ内で行います。