「CSS3を用いたアニメーション」と聞いただけで、何だか難しそうでやる気が出ません。
けれど、HTML要素のclass属性に、決まったクラス名を指定すると、CSS3を用いたアニメーションを実装することができるALL ANIMATION CSS3というのが、かなり簡単だったので紹介です。
photo by Maurice Svay
目次
ALL ANIMATION CSS3とは
ALL ANIMATION CSS3は、いろいろなブラウザに対応するように構築された、CSS3のフレームワークです。
とにかく、実装が簡単で、class属性に、「class=”pulse”」といったように、決まった名前を書き込むだけで、アニメーションする要素を実装できます。
例えばこんな感じに。
jQueryのaddClassメソッドと組み合わせることで、動的な要素を簡単に作ることができます。
ALL ANIMATION CSS3の使い方
ALL ANIMATION CSS3の使い方は、簡単です。
最も簡単な利用に必要な主な手順は以下です。
- CSSファイルのダウンロード
- CSSファイルの呼び出し
- HTML要素のCSSにクラスを書き込む
CSSファイルのダウンロード
まずは、ALL ANIMATION CSS3から、CSSファイルをダウンロードします。
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>
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でリロード
<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でリロード
<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でリロード
<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でリロード
<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でリロード
<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でリロード
<div class="flash-bang">flash-bang</div> <div class="bomba">bomba</div>
Rotate
※要Chromeでリロード
<div class="rotate-row">rotate-row</div>
ALL ANIMATION CSS3には、他のアニメーションも載っています。
まとめ
ALL ANIMATION CSS3を利用すると、Bootstrapのように、クラス名を指定するだけで、よく利用するアニメーションを要素に振る舞わせることができます。
全てのアニメーションを使うことは、なかなかないですが、「自分のやりたいアニメーションを行わせるためのCSSの参考書」としてもよさそうです。
クロスブラウザに力を入れて作成しているそうなので、CSSの書き方を調べるためのライブラリとしても便利かと思います。
