CSSだけで簡単にクリックエフェクトなどをアニメ化する
All Animation CSS3 オール・アニメーションCSS3とは？
スタイルシートフレームワークで、簡単にクリックやタップエフェクトをアニメーション化する方法だ。
HTMLにclassをつけるだけで実装できるので簡単。プログラミングの知識がなくてもできるので嬉しい。
超簡単な導入方法を紹介しよう。
オールアニメーションCSS3の導入方法
1. CSSとjQueryをダウンロード
右クリックで保存しよう。
all-animation.cssは「通常版」と「ミニファイド版」の2種類あるが、どちらでもOK。
・all-animation.css←通常版
・all-animation.min.css←minified版(軽量版)
・position.css
↑画像のサイズや表示位置を変える時に編集する。
・jquery-1.11.1.min.js
・bootstrap.min.js
・main.js
なお、.jsファイルは「.txt」としているので、ダウンロードしたら拡張子を「.js」に変更しておこう。ファイル名も確認しておこう。
・アーカイブ版 .zip (導入サンプルまとめてダウンロード)
all-animation.zip
2. CSSとjsファイルの読み込み
<head> と </head> の間で、cssを読み込もう。
<link rel="stylesheet" type="text/css" href="css/position.css" /><!–- all animation css3 –->
<link rel="stylesheet" type="text/css" href="css/all-animation.min.css" /><!–- all animation css3 –->
次に、</body>の直前辺りで、js ファイルを読み込もう。
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
これで読み込みは完成。あとは画像にclassをつけたり、するだけでアニメーションエフェクトが実装できる。
3. 画像のアニメーションエフェクト
画像アニメーションのデモページはこちら
画像の<img>のタグを div で囲んで、class にエフェクトを記入すると、その画像にアニメーションエフェクトをつけることができる。
記述例：
<div class="dance"><img src="img/画像名.jpg" /></div>
使用可能クラス一覧(エフェクトのデモはデモページを参考に。)
| エフェクト名 | クラス名 |
| ダンス | dance |
| 回転(ジャーナル) | journal |
| 鼓動(パルス) | pulse |
| ゆっくり鼓動 | pulse-slow |
| ジャンプ | japm |
| 4点 | four-rock |
| 上バウンド | enter-up-bounce |
| 下バウンド | enter-down-bounce |
| 右バウンド | enter-right-bounce |
| 左バウンド | enter-left-bounce |
| 背面バウンド | scale-bounce |
| ジャンプバウンド | jump-bounce |
| 右フリップ | tree-flip-right |
| 左フリップ | tree-flip |
| 上フリップ | tree-flip-up |
| 下フリップ | tree-flip-down |
| 左めくり | flip-left-bounce |
| めくり | rotate-flip |
| 右めくり | flip-right-bounce |
| 上から登場 | flip-top |
| 左から登場 | flip-left |
| 右から登場 | flip-right |
| 下から登場 | flip-bottom |
| 縦めくり | rotate-flip-down |
| ぶら下がり落ち | rotate-down-bounce |
| 回転消滅 | rotate-out |
| 点滅 | flash-bang |
| 吹き飛び | bomba |
| ぐるぐる | rotate-row |
| 下へ網掛け | legend-down |
| 上へ網掛け | legend-up |
| 左から網掛け | legend-left |
| 右から網掛け | legend-right |
| 終幕 | legend-flip |
| くっきり | portrait-before |
| ぼんやり | portrait-blur |
| そのまま | scale-before |
4. ボタンのアニメーションエフェクト
ボタンのアニメーションのデモページはこちら
button に data-efect= として、エフェクトのクラス名を記入するだけで、画像にアニメーションをつけることができる。
button の下で、画像を読み込んでおく。
記述例：
<div class="btns">
<button data-efect="dance">ダンス</button>
</div><!– btns –>
<div class="posi treed">
<div id="all-animation-icon">
<img src="img/all-animation.png" alt="" />
</div>
</div>
使用可能クラス一覧は画像のアニメーションエフェクトと全く同じ。
5. メニューのアニメーションエフェクト
メニューのアニメーションのデモページはこちら
ulやdivにクラスを付けて、簡単にアコーデオンやタブを実装可能。
個別アコーデオン
<ul class="all-animation double-acordeon">
連動アコーデオン
<ul class="all-animation acordeon">
フェードタブ
<div class="all-animation tab-panel">
スライドタブ
<div class="all-animation tab-slide-panel">
記述方法(個別アコーデオンの場合)：
<ul class="all-animation double-acordeon">
<li>
<input type="checkbox" name="_double_acordeon[]" id="double-acordeon1" checked />
<label for="double-acordeon1">メニュー1
<div>内容1</div>
</label>
</li>
<li>
<input type="checkbox" name="_double_acordeon[]" id="double-acordeon2" />
<label for="double-acordeon2">メニュー2
<div>
内容2</div>
</label>
</li>
<li>
<input type="checkbox" name="_double_acordeon[]" id="double-acordeon3" />
<label for="double-acordeon3">メニュー3
<div>
内容3</div>
</label>
</li>
</ul>
その他の記述方法は、メニューのアニメーションのデモページのソース、またはall-animation.zipを参照。
6. チェックボックスのアニメーションエフェクト
チェックボックスのアニメーションのデモページはこちら
div にクラス名を記入するだけで、チェックボックスやラジオボタンにエフェクトを付けて、トリガーボタンなどを作れる。
記述方法：
・トリガー
<div class="all-animation triggerOnOf">
<input id="check9" name="check9″ type="checkbox" />
<label for="check9"> トリガー黄緑</label>
</div>
・ラジオボタン
<div class="all-animation box-check">
<input id="radio1" name="radio1" type="radio" />
<label for="radio1"></label>
</div>
<div class="all-animation box-check">
<input id="radio2" name="radio1" type="radio" checked />
<label for="radio2"></label>
</div>
・チェックボックス
<div class="all-animation puft-in">
<input id="check1" type="checkbox" />
<label for="check1"></label>
</div>
その他のエフェクトはメニューのアニメーションのデモページのソース、またはアーカイブ版all-animation.zipを参照。
・アーカイブ版(導入サンプルまとめてダウンロード)
all-animation.zip
