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

「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で呼び出します。

<link rel="stylesheet" type="text/css" href="css/all-animation.css">

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

<!-- 親テーマで呼び出す -->
<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri()(); ?>/css/all-animation.css">
<!-- 子テーマで呼び出す -->
<link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_directory_uri(); ?>/css/all-animation.css">

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

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

<div class="pulse">
  pulse
</div>
pulse

jQueryで利用する場合

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

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

<img class="heart" src="PathTo/heart.png">
<button>鼓動</button>

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

<script type="text/javascript">
jQuery("button").click(function(e){
  e.preventDefault();
  jQuery(".heart").addClass('pulse');
});
</script>

ALL ANIMATION CSS3クラスの例

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

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

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

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

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

スマホでは非推奨です。

Especials

※要Chromeでリロード

dance
journal
pulse
pulse-slow
jamp
four-rock
<div class="dance">dance</div>
<div class="journal">journal</div>
<div class="pulse">pulse</div>
<div class="pulse-slow">pulse-slow</div>
<div class="jamp">jamp</div>
<div class="four-rock">four-rock</div>

Bounce

※要Chromeでリロード

enter-up-bounce
enter-down-bounce
enter-right-bounce
enter-left-bounce
scale-bounce
jump-bounce
<div class="enter-up-bounce">enter-up-bounce</div>
<div class="enter-down-bounce">enter-down-bounce</div>
<div class="enter-right-bounce">enter-right-bounce</div>
<div class="enter-left-bounce">enter-left-bounce</div>
<div class="scale-bounce">scale-bounce</div>
<div class="jump-bounce">jump-bounce</div>

Perspective

※要Chromeでリロード

tree-flip-right
tree-flip
tree-flip-up
tree-flip-down
flip-left-bounce
rotate-flip
flip-right-bounce
<div class="tree-flip-right">tree-flip-right</div>
<div class="tree-flip">tree-flip</div>
<div class="tree-flip-up">tree-flip-up</div>
<div class="tree-flip-down">tree-flip-down</div>
<div class="flip-left-bounce">flip-left-bounce</div>
<div class="rotate-flip">rotate-flip</div>
<div class="flip-right-bounce">flip-right-bounce</div>

Fading Entrances

※要Chromeでリロード

flip-top
flip-left
flip-right
flip-bottom
<div class="flip-top">flip-top</div>
<div class="flip-left">flip-left</div>
<div class="flip-right">flip-right</div>
<div class="flip-bottom">flip-bottom</div>

Rotate

※要Chromeでリロード

rotate-flip-down
rotate-down-bounce
rotate-out
<div class="rotate-flip-down">rotate-flip-down</div>
<div class="rotate-down-bounce">rotate-down-bounce</div>
<div class="rotate-out">rotate-out</div>

Agreccives

※要Chromeでリロード

flash-bang
bomba
<div class="flash-bang">flash-bang</div>
<div class="bomba">bomba</div>

Rotate

※要Chromeでリロード

rotate-row
<div class="rotate-row">rotate-row</div>

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

まとめ

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

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

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