Animistaの使い方

基本的な機能のご紹介が終わったところで、使い方を確認していきましょう。
Animistaの公式ホームページでは、以下の手順で使うことが推奨されています。

1. Play!

まずはボタンを触って好みのアニメーションを探しながら、easingやdelay、dulationなどのプロパティをいじってみましょう。
どこでアニメーションを使おうか想像しながら触ってみるといいでしょう。

2. Like!

まずは ボタンを押してお気に入りに追加しましょう。
ブラウジングしながら、お気に入りをいくつかピックアップしてみてください。
を押してお気に入りをいつでもチェックすることができ、 でいつでもやり直すことができます。

3. Copy! / Download Code!

お気に入りに追加して準備ができたら、 をクリックしてコードをダウンロードしましょう。
「animista.css」という形で出力されます。
あるいは生成されたCSSのコードを直接いつも使っているコードエディターに貼り付けてもOKです。

まとめ

アニメーションに関しては目を引くようなユニークなプラグインやライブラリもたくさんありますが、ここまで使い勝手がよいのはAnimistaだけだと言っても過言ではないでしょう。
また、必要なアニメーションだけをピックアップすることができるので、結果的に軽量になり、ページスピードの改善にも一役買ってくれそうです。