CSSのアニメーションで画像を回転・切替します。

アイコンを回転させて切り替えています。

main.jsでクリックするたびにclassを付け替えています。これによってアニメーションしながら表示・非表示するようになります。
transition-property で何をanimationするのかを指定　今回で言うと「pacity」と「transform」
transition-duration で再生時間を指定しています。

ベンダープレフィックスをつけていますが、スマホだけならこんなに必要ないかなと。
-ms-transition-property:opacity,-ms-transform;
-ms-transition-duration:1s;
-moz-transition-property:opacity,-moz-transform;
-moz-transition-duration:1s;
-webkit-transition-property:opacity,-webkit-transform;
-webkit-transition-duration:1s;
transition-property:opacity,transform;
transition-duration:1s;

アイコンフォントFont Awesomeを使っています。

デモページへ

JSを読み込みます

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script type="text/javascript" src="js/main.js"></script>

[main.js]JavaScript

jQuery(document).ready(function($){
	var btn = $(".mod_btn .btnMenu");

//click
	$(btn).bind("click", "focus", function(event){
    if($(btn).hasClass("off")){
		$(btn).removeClass("off").addClass("on");
    }else{
		$(btn).removeClass("on").addClass("off");
   }
　});

});

HTMl

<div class="mod_btn">
<p class="btnMenu off"><a href="javascript:void(0)"><span>メニューを開く</span><i class="openicon fa fa-list-ul"></i><i class="closeicon fa fa-times"></i></a></p>
<!-- / .mod_btn --></div>

CSS



/* mod_btn
-----------------------------------------*/
.mod_btn p.btnMenu {
 position:relative;
 width:27px;
 height:27px;
 background-color:#006d86;
}
/* text hidden */
.mod_btn .btnMenu span{
 display:block;
 width:1px;
 height:1px;
 overflow:hidden;
}
.mod_btn .btnMenu a{
 display:block;
 color:#FFF!important;
}
.mod_btn .btnMenu.on a{
 background-color:#005467;
}
.mod_btn .btnMenu i{
 position:absolute;
 top:3px;
 left:3px;
 font-size:150%;
}
.mod_btn .btnMenu.on i{
 top:3px;
 left:6px;
}
/* off closeicon 非表示 */
.mod_btn .btnMenu.off i.closeicon{
 opacity:0;
 -webkit-transform: rotate(-90deg);
 transform: rotate(-90deg);
}
.mod_btn .btnMenu.on i.closeicon{
 opacity:1;
 -ms-transition-property:opacity,-ms-transform;
 -ms-transition-duration:1s;
 -moz-transition-property:opacity,-moz-transform;
 -moz-transition-duration:1s;
 -webkit-transition-property:opacity,-webkit-transform;
 -webkit-transition-duration:1s;
 transition-property:opacity,transform;
 transition-duration:1s;
}
/* on openicon 非表示 */

.mod_btn .btnMenu.off i.openicon{
 opacity:1;
 -ms-transition-property:opacity,-ms-transform;
 -ms-transition-duration:1s;
 -moz-transition-property:opacity,-moz-transform;
 -moz-transition-duration:1s;
 -webkit-transition-property:opacity,-webkit-transform;
 -webkit-transition-duration:1s;
 transition-property:opacity,transform;
 transition-duration:1s;
}
.mod_btn .btnMenu.on i.openicon{
 opacity:0;
 -webkit-transform: rotate(90deg);
 transform: rotate(90deg);
}