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>

使用可能クラス一覧(エフェクトのデモはデモページを参考に。)

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