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

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

チェックボックスを使用して、クリックした状態で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でやった方が早いんじゃないって感じは否めませんがこんな方法もあるということで。