GINPRO / SQLの窓と銀プログラマ

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
	$("#action")
		.attr( { "type": "button" })
		.val( "アニメーション1" )
		.click(function(){
			$("#target").addClass("set_image2");
		});
	$("#action2")
		.attr( { "type": "button" })
		.val( "アニメーション2" )
		.click(function(){
			$("#target").removeClass("set_image2");
		});
});
</script>
<style type="text/css">
/**************************************/
/* 変化前の状態 */
/**************************************/
.set_image {
	width: 526px;
	height: 526px;
	background: no-repeat url(https://lh4.googleusercontent.com/-Hy0zxyLJ1l8/T-H1qhd4AxI/AAAAAAAAG30/KGtB2FknDAE/s640/H_2016a.png);
	background-color: #000000;
}
/**************************************/
/* 変化後の状態 */
/**************************************/
.set_image2    {  
	width: 300px;
	height: 300px;
	background-position: -90px 0px;
	background-color: #4DBDB5;
	transform: rotate(360deg);
}  
/**************************************/
/* 変化の定義 */
/**************************************/
.box_transition {
	transition: all 1.3s ease-out 0s;
}
</style>
<input id="action"><input id="action2">
<div id="target" class="box_transition set_image"></div>