🎞️CSSアニメーション生成

人気エフェクト20種＋カスタム編集。プレビューしながら CSS コードを即コピー。

プレビュー

🟪

⬤

🎈

duration:1s timing:ease iter:1

カテゴリから選ぶ

継続時間 (duration)1s

遅延 (delay)0s

タイミング関数

繰り返し1

方向

終了状態 (fill-mode)

CSS コード

使い方: プリセットを選ぶか、カスタム編集タブで @keyframes を直接編集。
各プロパティはリアルタイムにプレビューに反映されます。
animation プロパティ: name duration timing delay iteration direction fill-mode の順で1行にまとめられます。
コードはそのまま <style> タグや CSS ファイルに貼り付けて使えます。