CSS3の「:target疑似クラス」を使い、CSSだけで画像のアニメーション（回転）の開始と停止を制御します。動作サンプルの開始ボタンをクリックすると、コニファくんが画像が回転を開始します。停止ボタンをクリックすると止まります。

仕組み：静止画像と回転する画像の二つを用意し、div要素（id="start"）の弟要素である二つのdiv要素の中にそれぞれ配置させます。そして回転する画像が入ったdiv要素を「display:none」で隠し、静止画像の入ったdiv要素のみを表示します。

開始ボタンをクリックすると、内部リンクであるdiv要素（id="start"）に飛び、:target疑似クラスの「#start:target ~ div」の指定で、弟要素である二つのdiv要素とも「display:block」により表示させます。次に:target疑似クラスの「#start:target + div」の指定で、div要素（id="start"）に隣接した弟要素である静止画像の入ったdiv要素のみを「display:none」で隠します。その結果、見た目は回転する画像に切り替わります。

停止ボタンをクリックすると、:target疑似クラス無指定の要素（id="stop"）に飛ぶため、元に戻ります。
（動作サンプルは最下段です）

サンプルのhtmlソース

<div class="btn" id="stop">
	<a href="#start">アニメーション開始</a>　
	<a href="#stop">アニメーション停止</a>
</div>
<div class="image">
	<div id="start"></div>　/* 兄要素 */
	<div class="static"><img src="img/logo3.png" width="150"></div>
	<div class="anime"><img src="img/logo3.png" width="150"></div>  
</div>

サンプルのCSSソース

.static,.anime {
	width: 150px;
	height: 150px;
	margin:30px auto;
	text-align:center;
	}
.anime {
background: #fff;
	-webkit-animation: spin 3.5s linear infinite;
	-moz-animation: spin 3.5s linear infinite;
	-ms-animation: spin 3.5s linear infinite;
	-o-animation: spin 3.5s linear infinite;
	animation: spin 3.5s linear infinite;
	} 
@-webkit-keyframes spin {
	0% {-webkit-transform: rotate(0deg);}
	100% {-webkit-transform: rotate(360deg);}
	}
@-moz-keyframes spin {
	0% {-moz-transform: rotate(0deg);}
	100% {-moz-transform: rotate(360deg);}
	}
@-ms-keyframes spin {
	0% {-ms-transform: rotate(0deg);}
	100% {-ms-transform: rotate(360deg);}
	}
@-o-keyframes spin {
	0% {-o-transform: rotate(0deg);}
	100% {-o-transform: rotate(360deg);}
	}
@keyframes spin {
	0% {transform: rotate(0deg);}
	100% {transform: rotate(360deg);}
	}
/*---------start stop---------*/
#start ~ div {
	display:none;
	}
#start + div {
	display:block;
	}
#start:target ~ div { 
	display:block;
	}
#start:target + div { 
	display:none;
	}