SPONSORED ADVERTISEMENT
Placeholder (banner)
CSS アニメーション・キーフレームビルダー
タイムラインに沿って位置，サイズ，透明度，回転を指定し，変化のアニメーションをプレビューしながら，@keyframes のCSSコードを出力します．
読み込み中...
ZeroToolsは，完全ローカル処理で「絶対の安全」をお約束します
当サイトの CSS アニメーション・キーフレームビルダー を含むすべてのツールは，処理を外部サーバーではなく，お客様のブラウザ内（ローカル環境）でのみ実行します．機密データや個人情報，社外秘ファイルがネットワークを通じて外部に送信されることは一切ありません．登録不要で，いつでもオフラインでもご利用いただけます．
よくある質問（FAQ）
A.
はい，「CSS出力」ボタンから生成された @keyframes ルールと対応するクラス指定をコピーして，ご自身のスタイルシートにそのまま適用できます．
A.
linear（等速），ease-in（加速），ease-out（減速），および ease-in-out などの主要なトランジションカーブを選択して設定できます．
A.
はい，ループ回数の指定（無限ループを含む）や，往復再生（alternate）などの再生方向 of パラメーターもCSSコードとして出力可能です．
関連する便利ツール
JSON整形＆構文チェッカー
CSS アニメーション・キーフレームビルダーとJSON整形＆構文チェッカーをあわせて活用することで，日常の業務効率やデータ処理のスピードをさらに高めることができます．
相互エンコーダー (Hex/Binary/Base64/URL)
CSS アニメーション・キーフレームビルダーと相互エンコーダー (Hex/Binary/Base64/URL)をあわせて活用することで，日常の業務効率やデータ処理のスピードをさらに高めることができます．
コード・スクリーンショット作成
CSS アニメーション・キーフレームビルダーとコード・スクリーンショット作成をあわせて活用することで，日常の業務効率やデータ処理のスピードをさらに高めることができます．