CSS3 : 絶対位置指定(absolute)を使用して簡単にアニメーション。しかも、適用するのは、JavaScript

※ IE では動作しません

ボタンを押すと、単純に移動アニメーションになります

最初の transition 指定のみ CSS で指定していますが、後の動作は
JavaScript で適用していいます。その際注意するのは、ブラウザに
よって、プロパティが違うところです( 最初が小文字で無いのもある )

こういう指定が面倒だと思われる場合は、CSS で クラスを作成して、
エレメントにクラスを追加指定すればいいと思います。
※ 今のクラス文字列を取得して、" クラス名" を追加して設定。

<style type="text/css">
.place_holder {
	position:relative;
	width:600px;
	height:400px;
	border:solid 1px #000;
}
#my_box1 {
	position:absolute;
	left:0px;
	top:0px;
	width:30px;
	height:30px;
	background:url("http://winofsql.jp/favicon.ico");
	-webkit-transition: all 5s ease;
	-moz-transition: all 5s ease;
	-o-transition: all 5s ease;
	-ms-transition: all 5s ease;
	transition: all 5s ease;
	border:1px #000 solid;
}
</style>
<script type="text/javascript">
var tf_flg1 = false;
function my_action1() {
//	alert("テスト開始");
	// 移動
	if ( tf_flg1 = !tf_flg1 ) {
		document.getElementById("my_box1").style.left = "600px";
		document.getElementById("my_box1").style.top = "400px";
	}
	else {
		document.getElementById("my_box1").style.left = "0px";
		document.getElementById("my_box1").style.top = "0px";
	}
}

function my_action2() {
	// 移動
	var tf = document.getElementById("my_box1");

	if ( tf_flg1 = !tf_flg1 ) {
		tf.style.left = "600px";
		tf.style.top = "400px";
		tf.style.transform = "rotate(360deg)";
		tf.style.webkitTransform = "rotate(360deg)";
		tf.style.MozTransform = "rotate(360deg)";
		tf.style.OTransform = "rotate(360deg)";
		tf.style.msTransform = "rotate(360deg)";
	}
	else {
		tf.style.left = "100px";
		tf.style.top = "300px";
		tf.style.transform = "rotate(0deg)";
		tf.style.webkitTransform = "rotate(0deg)";
		tf.style.MozTransform = "rotate(0deg)";
		tf.style.OTransform = "rotate(0deg)";
		tf.style.msTransform = "rotate(0deg)";
	}
	// 回転
	
}
</script>

<input type="button" value="実行1" onclick="my_action1();">
<input type="button" value="実行2" onclick="my_action2();">
<div class="place_holder">
<div id="my_box1"></div>
</div>

関連する Microsoft ドキュメント

msTransform Property
 (CSSStyleDeclaration, currentStyle, style, ...)

関連する記事
WEB フォントを使った「フェードイン、フェードアウト」

CSS3

CSS/jQuery : 『display:table-cell』 と 『margin:auto』 と 『vertical-align:middle』 を使用して、吹き出し画像の中央に文章を表示する

CSS の box-shadow を jQuery を使ってスライダーでどうなるか確認して定義文字列を取得できるようにしました

CSS アニメーションによるハンバーガーアイコンの作成方法と CSS プロパティの意味

CSS だけで回る、実行中アイコン ( 但し IE9 は不可 ) の指定されたCSSの意味の解説

『3D Bouncing Ball with CSS3』のデータを使って光沢ボタンを作成する

フリーフォントを使った背景透過PNGとCSSを使って、グラデーションな影付き吹き出しやボタンを作る。

Google ストリートビューを表示している class="gm-style"

linear-gradient のみで、ほぼ大丈夫なようです(IEは10限定、Windows Safariはアウト)

現時点の IE9、IE10、Chrome、Firefox、Opera、Safari でグラデーションの CSS 記述

CSS3 : box-shadow の影分身の解説

CSS で画像が立ってるような影を付けて、画像の角は丸くしておく

IE 兼用背景 Fade transition の実装

CSS3 と HTML5 で実装具合の表示テスト - 2 / ( 透過・倍率編 )

CSS3 と HTML5 で実装具合の表示テスト

ブラウザ別の角丸とグラデーションの適用状態の比較画像

CSS3 の borderRadius で、四角から円へのモーフィング