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

酒井涼

2017年4月10日

560

ライター・コラムニスト。デザインやテクノロジー、マーケティングやライフハック系の記事が得意。2016年からferretでも記事の執筆を開始。Twitterでも面白いWebサービスなどを紹介しています。よろしければそちらもチェックしてみてください。
　　
>> 執筆記事一覧はこちら

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

アニメーションは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を設定します

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

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

3. アクションボタン

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

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

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

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

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

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

Animistaの使い方

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

1. Play!

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

2. Like!

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

3. Copy! / Download Code!

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

まとめ

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

こちらもおすすめ