【WAIT! Animate】CSSのキーフレームを使った複雑なアニメーション作成できるウェブサービス
2016.07.27
動きを確認しながら作成できるCSSアニメーションジェネレーター
いまではCSSで再現できるようになりました。
ただ指定方法が若干めんどくさい時があります。
そんなときに役に立つのが「WAIT! Animate」です。
簡単なアニメーションから、少し手の込んだアニメーションまで、
ディスプレイで確認しながら作成できます。
- 簡単なアニメーション制作例
「Animation」で好きなアニメーションを指定、
好きな設定が完了したら右下の「COPY TO CLIPBOARD」をクリックして表示されているCSSをコピーします。
そして自分のCSSに貼り付けたらOKです。
- 複雑なアニメーション制作例
あとは各パラメータを細かく指定し好きな設定します。
アイコンはFont AwesomeなどのアイコンWEBフォントを使用すると簡単に設定できます。
ある程度いくつかの動きをCSSに記載しておき、
アイコンやアニメーションで動かしたい要素にあわせて変更できるようにしておくと便利です。