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

この記事は4年前に書かれました。不適当な記述を含む場合がありますので、参考程度に留めてください。

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

実装方法

クリックでアニメーションを発火させるには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-の有無で2種類の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を記述するだけです。
 

以上になります。