眼球を捉えるようなユニークな動きをするアニメーションを絶妙なタイミングで取り入れることで、ユーザーの興味を引いて離脱を防げる確率が高くなります。

アニメーションはHTML5やCSSでも簡単なものであれば実装することができますが、10年前にAdobe Flashを使って表現していたような複雑なアニメーションを実現するために、CSSやJavaScriptを使ったライブラリを取り入れている方もいらっしゃるのではないでしょうか。

しかし、ライブラリには大抵デモページがついているものの、基本的なアニメーションの確認しか行うことができないものがほとんどです。
実際のところこうしたアニメーションライブラリにはアニメーションの速度やタイミングなど、さまざまなオプションがあり、オプションを活用することで、より活き活きとしたアニメーションを実装することができます。

ところが、デモページではこれらの詳細まで微調整しながら確認できるものは少ないので、結局はコーディングしながら確認していくしかありません。

今回は、あらゆるアニメーションを微調整しながらその場で確認して、実装コードまで吐き出す非常に便利なWebサービス*「Animista」*をご紹介します。
Aministaは通常のアニメーションに加えて、テキストや背景などに特化したユニークなアニメーションも用意しています。
ぜひ触ってみてください。

こちらもおすすめ

ホームページにアニメーションを実装するライブラリ＆プラグイン12選
意外と盲点!? あまり知られていないけど”知ると便利”なCSSプロパティ19選
コピペで実装！CSS3でオシャレなデザインのサンプルコード23選

Animistaとは？

logo.png

AnimistaはクロアチアのUI/UXデザイナー・フロントエンドデベロッパーのAna Travasさんが作成したCSSアニメーションのプレイグラウンドサイトです。
Anaさん自身はWearec2というサイトでCSS Design Awardsを受賞したほどのCSSの卓越した使い手で、CSSアニメーションについても精通しています。

このプレイグラウンドでは、easingやdelay、durationやそのほか様々な設定をその場で調整しながら、アニメーションがどのように作動するかを直座に確認することができます。

※ 現在、デスクトップでのみ閲覧が可能です。モバイルブラウザの方は、「PC画面で表示する」などのオプションを使って表示するか、お手持ちのパソコンでご覧ください。

Animistaの基本的な機能

Animistaはログインなどの手間は一切不要で、アクセス後すぐに触り始めることができます。
Aministaはそれぞれのアニメーションの中で気に入ったコードを別個に取得することもできますが、さらに便利なのは「お気に入り」でピックアップした複数のアニメーションをCSSライブラリ形式で１つのファイルとしてダウンロードすることができるのです。
ここでは、基本的な機能や操作方法をご紹介します。

1. カテゴリとアニメーション選択

animista1.jpg

Animistaでは、アニメーションのカテゴリが6つに分かれています。

  • BASIC：基本アニメーション
  • ENTRANCES：何もないところから出現するアニメーション
  • EXITS：すでにあるオブジェクトを消失させるアニメーション
  • TEXT：テキスト関連のアニメーション
  • ATTENTION：震えたり拡大縮小して目を引くようなアニメーション
  • BACKGROUND：背景関連のアニメーション

カテゴリを選択すると、それぞれで選択可能なアニメーションの種類が円状のUIで選択可能です。
さらに、種類を選ぶと、さらに細分化されたアニメーションを選択することができます。

2. プロパティの設定

animista2.jpg

アニメーションの種類を決めたら、Optionsウィンドウでプロパティの設定を行います。
プロパティには、以下のものが設定できます。

  • select object：プレビューで表示させるオブジェクトの種類。円や四角形、画像やボタンなどを選択できます
  • duration：アニメーションの速度を設定できます
  • time-function：CSSで定義されているアニメーションのタイミング(linear、easeInOut、easeOutBackなど)を設定できます
  • use steps：数字を設定するとそのコマ数でパラパラマンガのようなアニメーションを実装することができます。time-functionとは併用できません
  • delay：アニメーションの開始までの遅延時間を設定できます
  • iteration-count：繰り返しの数を設定します。infiniteを選択すると無限アニメーションになります
  • direction：規定値はnormalですが、reverseを使うと逆コマ再生、alternateで反転再生、alternate-reverseで反転逆コマ再生が可能です(※)
  • fill-mode：animation-fill-modeを設定します

※ alternate、alternate-reverseはiteration-countが2以上である必要があります

アニメーションの設定のいくつかは、下記の記事にも詳細がかかれています。
参考：
意外と盲点!? あまり知られていないけど”知ると便利”なCSSプロパティ19選

3. アクションボタン

animista3.png

プレビュー画面の右上には、3つのアクションボタンが設置されています。
左から順に、説明していきます。

  • Replay Animation ( )：プレビューをもう一度再生します
  • Add to Favorites ( )：お気に入りに追加できます
  • Generate Code ( {・} )：現在確認しているアニメーションのコードを表示します

コードは単独でクリップボードにコピーすることもできますが、お気に入りをいくつか保存しておくことで、あとでまとめてお気に入りに追加した分だけをCSSライブラリ形式でダウンロード可能です。

4. ファンクションボタン

animista4.png

カテゴリの右側に、3つのファンクションボタンが設置されています。
左から順に、説明していきます。

  • Filter Favorites ( )：クリックすると、現在お気に入りしているものを表示します。フィルターで絞り込み検索を行うこともできます
  • Clear Favorites ( )：追加したお気に入りを消去します
  • Download Favorites ( )：お気に入りに追加したアニメーションをCSSライブラリ形式でダウンロードします