調整も楽々！CSSアニメーションをその場で確認できる「Animista」の使い方を解説

更新日: 2018年05月28日

動画・映像制作

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

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

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

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

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

Animistaとは？

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

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

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

Animistaの基本的な機能

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

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

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

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

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

2. プロパティの設定

アニメーションの種類を決めたら、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を設定します