【コピペOK!】CSSアニメーション集「Animista」

【コピペOK!】CSSアニメーション集「Animista」

Animistaはcssのみで実装できる様々なアニメーションを集めたcssライブラリです。
画面上で使いたいアニメーションを直感的に選んで、コードをダウンロードするだけなので、
なんかアニメーションをつけたいけどjsをガリガリ書けない、手っ取り早くいい感じの
アニメーションを実装したいという人にオススメです。

Animista

使い方

使いたいアニメーションを選ぶ

サイトにアクセスし「Try Me!」というボタンをクリックすると、
早速アニメーションの選択画面が表示されます。

アニメーションの種類は、

  1. カテゴリ大で基本的なものや、テキストのアニメーション、背景..など大まかなアニメーションの種類
  2. カテゴリ中で「SWING」や「SLIDE」具体的なアニメーションの種類
  3. カテゴリ小でアニメーションの方向などの細かい種類

を選んでいきます。

OPTIONで微調整する

アニメーションの長さや繰り返しなどの細々した設定をする場合は、
上記の赤枠内で設定します。

設定したコードをコピー

好みの設定を作成したあと、画面右上の{・}マークをクリックすると、
コードの書かれた画面が表示されます。

動きをつけたい要素にクラスを設定すれば完成!

自分のcssに上記コピーしたコードを貼り付けて、
動きをつけたい要素に先ほどのクラスを設定します。

サンプル

背景のグラデアニメーションとテキストのアニメーションに使ってみました。

サンプル