CSS3アニメーションのタイミングをGUIで分かりやすく調整できるツール


cubic-bezier (Lea Verou)

CSS3アニメーションの速く動いたり遅く動いたりのタイミングを、GUIで分かりやすく調整できるツールが公開されています。 (英語)

具体的にはCSS3の「animation-timing-function」プロパティの「cubic-bezie」の値を生成できます。

青い丸と赤い丸をマウスでドラッグすると、よくあるドローペイント・アプリのベジェ・ツールと同じような要領で調整できます。

「Preview & compare」の右隣りにある「Go!」ボタンを押すと、実際の動きを確認できます。

(*価格は掲載時のものです。購入時にご確認ください。)