🎞️Css Animation

Css Animation is a free browser-based tool. Supported files are processed locally whenever possible, with no installation required.

Preview

🟪

⬤

🎈

duration:1s timing:ease iter:1

カテゴリから選ぶ

継続時間 (duration)1s

遅延 (delay)0s

タイミング関数

繰り返し1

方向

endstatus (fill-mode)

CSS code

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