WEBOPIXEL

CSS3だけでクリックでアニメーションさせる

Posted: 2011.12.21 / Category: HTML&CSS / Tag: 

CSS3でアニメーションが使えるようになり「hover」と組み合わせればマウスオーバーアニメーションならJSを使わなくても余裕な感じですが、クリックでアニメーションしたいときはそれらしいセレクターがないのでできないかなと思ってましたが、頑張ればできるらしいです。

Sponsored Link

クリックした要素自身をアニメーションする

チェックボックスを使用して、クリックした状態でcssを切り替えることでアニメーションさせます。
動かしたい要素を「label」で囲めばチェックボックスと連動するんです。

html

	<input type="checkbox" id="start">
	<label for="start">
	   <div id="box"></div>
	</label>  
	

css

	/* チェックボックスは非表示 */
	#start {
		display: none;
	}
	/* アニメーション */
	#box {
		width: 80px;
		height: 80px;
		margin-top: -150px;
		cursor: pointer;
		background: #33CCCC;
		-webkit-transition: all 1s ease;
		-moz-transition: all 1s ease;
		-o-transition: all 1s ease;
	}
	/* 動かす位置 */
	#start:checked ~ label #box {
		margin-left: 200px;
	}
	

ボタンをクリックしたら他の要素をアニメーションする

ほとんど変わらないですが、ボタンで動かす場合です。
「label」の中にボタンキーとなるボタンを配置して、「label」の下に動かしたい要素を配置します。

html

	<input type="checkbox" id="start">
	<label for="start">
	   <div id="btn">Button</div>
	</label>  
	<div id="box"></div>
	

cssです。
最後のセレクタ部分を変更するだけです。

css

	#start:checked ~ #box {
		margin-left: 200px;
	}
	

以上、javascriptでやった方が早いんじゃないって感じは否めませんがこんな方法もあるということで。

[参考サイト] Path menu in pure CSS3

LEAVE A REPLY

コードを書く場合は<pre>で囲んでください。