【WAIT! Animate】CSSのキーフレームを使った複雑なアニメーション作成できるウェブサービス

Tweet

2016.07.27

動きを確認しながら作成できるCSSアニメーションジェネレーター

一昔前ではjQueryなどJavaScriptを使って作成していたアニメーションも、
いまではCSSで再現できるようになりました。

ただ指定方法が若干めんどくさい時があります。
そんなときに役に立つのが「WAIT! Animate」です。

簡単なアニメーションから、少し手の込んだアニメーションまで、
ディスプレイで確認しながら作成できます。

簡単なアニメーション制作例

「Wait time」でインターバルの待ち時間を設定、
「Animation」で好きなアニメーションを指定、
好きな設定が完了したら右下の「COPY TO CLIPBOARD」をクリックして表示されているCSSをコピーします。
そして自分のCSSに貼り付けたらOKです。

複雑なアニメーション制作例

こちらも「Wait time」でインターバルの待ち時間を設定、
あとは各パラメータを細かく指定し好きな設定します。

アイコンはFont AwesomeなどのアイコンWEBフォントを使用すると簡単に設定できます。
ある程度いくつかの動きをCSSに記載しておき、
アイコンやアニメーションで動かしたい要素にあわせて変更できるようにしておくと便利です。