要素にクラスを指定するだけで手軽にアニメーションさせられる「ALL ANIMATION CSS3」の使い方

サイバーマンデー
Amazonプライム会員限定の大セール「サイバーマンデー」開催中!プライム会員限定の大セール

「CSS3を用いたアニメーション」と聞いただけで、何だか難しそうでやる気が出ません。

けれど、HTML要素のclass属性に、決まったクラス名を指定すると、CSS3を用いたアニメーションを実装することができるALL ANIMATION CSS3というのが、かなり簡単だったので紹介です。

photo by Maurice Svay

スポンサーリンク
レクタングル(大)広告

ALL ANIMATION CSS3とは

AllAnimationCss3

ALL ANIMATION CSS3は、いろいろなブラウザに対応するように構築された、CSS3のフレームワークです。

とにかく、実装が簡単で、class属性に、「class=”pulse”」といったように、決まった名前を書き込むだけで、アニメーションする要素を実装できます。

例えばこんな感じに。

heart

jQueryのaddClassメソッドと組み合わせることで、動的な要素を簡単に作ることができます。

ALL ANIMATION CSS3の使い方

ALL ANIMATION CSS3の使い方は、簡単です。

最も簡単な利用に必要な主な手順は以下です。

  1. CSSファイルのダウンロード
  2. CSSファイルの呼び出し
  3. HTML要素のCSSにクラスを書き込む

CSSファイルのダウンロード

まずは、ALL ANIMATION CSS3から、CSSファイルをダウンロードします。

AllAnimationCss3のダウンロード

CSSファイルの呼び出し

ダウンロードした、「all-animation.css」ファイルをプロジェクトディレクトリ内に入れて、linkで呼び出します。

WordPressで呼び出すなら以下のように呼び出します。

HTML要素のCSSにクラスを書き込む

あとは、ALL ANIMATION CSS3から、目的のクラス名を取得して、以下のように要素に書き込みます。

pulse

jQueryで利用する場合

冒頭の、「ボタン押したらハートが脈打つ」みたいにするときは、以下のように書きます。

まずは、こんな感じで画像とボタンを用意します。

あとは、</body>タグ手前あたりに、jQueryで以下のように書けばOKです。

ALL ANIMATION CSS3クラスの例

その他の、アニメーションクラスの例を以下に書いておきます。

ALL ANIMATION CSS3では、ボタン押したら動作するサンプルが掲載されています。

けれど、以下のサンプルは、あらかじめ要素にクラス名を記入した状態のサンプルです。

なので、ブラウザをリロードしないと見ることのできないものもあります。

IEは、リロードした時点で、一旦上に戻るので、うまく表示されないと思います。Firefox、Chromeで見れますが、Chromeが最も描画が綺麗です。(※それでも、スペックが高くない僕のパソコンなどは処理落ちします。)

スマホでは非推奨です。

Especials

※要Chromeでリロード

dance
journal
pulse
pulse-slow
jamp
four-rock

Bounce

※要Chromeでリロード

enter-up-bounce
enter-down-bounce
enter-right-bounce
enter-left-bounce
scale-bounce
jump-bounce

Perspective

※要Chromeでリロード

tree-flip-right
tree-flip
tree-flip-up
tree-flip-down
flip-left-bounce
rotate-flip
flip-right-bounce

Fading Entrances

※要Chromeでリロード

flip-top
flip-left
flip-right
flip-bottom

Rotate

※要Chromeでリロード

rotate-flip-down
rotate-down-bounce
rotate-out

Agreccives

※要Chromeでリロード

flash-bang
bomba

Rotate

※要Chromeでリロード

rotate-row

ALL ANIMATION CSS3には、他のアニメーションも載っています。

まとめ

ALL ANIMATION CSS3を利用すると、Bootstrapのように、クラス名を指定するだけで、よく利用するアニメーションを要素に振る舞わせることができます。

全てのアニメーションを使うことは、なかなかないですが、「自分のやりたいアニメーションを行わせるためのCSSの参考書」としてもよさそうです。

クロスブラウザに力を入れて作成しているそうなので、CSSの書き方を調べるためのライブラリとしても便利かと思います。