CSS3でアニメーション【vol.4】- クリックでアニメーションを実行させる方法（複数同時実行例含む）

どうもこんにちは。Toshikuraです。今回のtipsは【CSS3でアニメーション【vol.4】- クリックでアニメーションを実行させる方法】です。全5回に分けてステップアップ式に記事化している第四弾です。前回はホバーによってCSSアニメーションが再生される方法をとりあげましたので今回はクリックでの再生開始をメモしておきます。

• 【vol.1】- とりあえずはじめの一歩。
• 【vol.2】- ホバーでアニメーション実行 & 複数アニメーションの組み合わせ方法
• 【vol.3】- イージングを生成してくれる便利なジェネレーター
• 【vol.4】- クリックでアニメーションを実行させる方法（複数同時実行例含む）
• 【vol.5】- ちょっと複雑なアニメーションを作ってみる。
• 【vol.6】- CSS3アニメーションで動作するjQueryスライダーを作ってみる
• 【vol.7】- jQueryでCSS3アニメーションの終了のタイミングを取得する方法

実装方法

クリックでアニメーションを発火させるにはjsの助けが必要になります。具体的には事前に任意のclassに対してアニメーションの内容指定しておきクリックでそのクラスをつけたり外したりする操作を行います。

コード

HTML

<div class="css3-C">click</div>

CSS

div.css3-C{
    background: #007374;
    -webkit-transition-property:background,-webkit-transform;
    -webkit-transition-duration:1s;
    transition-property:background,transform;
    transition-duration:1s;
}
div.after{
    background: #19283c;
    -webkit-transform: translate(200px,0) rotate(360deg);
    transform: translate(200px,0) rotate(360deg);
}

例では【.after】にアニメーション後の状態を記述しています。transformを使用していますので-webkit-の有無で２種類のcssを併記しています。

JS

$(function(){
    $(‘.css3-C’).click(function(){
        $(this).toggleClass(“after”);
    });
});

jQueryを使ってクリックごとに.afterをつけたり外したりしています。割愛していますが事前にjQueryを読み込んでください。

複数アニメーションの同時実行

また工夫次第では、複数のアニメーションを同時に実行させる事も簡単です。つけ外しする【.after】に対して親子関係を考慮したCSSを記述すれば実装可能です。

HTML

<div class="css3-C"><div>click</div></div>

CSS

div.css3-C{
    transition-property:background;
    transition-duration:1s;
    background: #000;
}
div.css3-C div{
    transition-property:height;
    transition-duration:1s;
    height:10px;
}
/*アニメーション1種類目*/
div.after{
    background: #19283c;
}
/*アニメーション2種類目*/
div.after div{
    height:150px;
}

class名【css3-C】の中に子のDIVを記述しています。あとはこの親子にCSSを記述するだけです。
　

以上になります。