CSSアニメーションを自由自在に編集、コード出力できるWebサービス 『Animotion』

CSSアニメーションを自由自在に編集、
Web上のエディターで作成できるWebサービス。
プレビューで確認しながら調整、
CSSコード出力も可能です。

リンク先

Animotion リンク先はこちらから

レビュー

右側にはたくさんの動作があらかじめ用意されています。
Spin Leftは左から転がる様に表示されます。他にもShakeXなど様々な動作が
用意されているのでクリックすると選択、プレビューでアニメーションが再生されます。

画面下部にはタイムラインのように再生され、動作開始位置などを
設定して調整が可能です。ちょっと使い方が難しいのですが、
細かく調整できるようです。

Edit Animationでは更に細かく設定ができます。
CSSコードが表示されていますが、こちらは直接の編集は出来ない様です。
画面上の位置を変更したりで調整が可能で、リアルタイムにコードに
出力されていきます。
CSSで複雑なアニメ―ションを作成したい場合などに便利なツールです。