jQueryでCSS3アニメーションを簡単操作出来る jQuery Transit が楽しい！

Transit – CSS transitions and transformations for jQuery

僕はあまりCSS3でアニメーションを扱う機会がないのですが、これは楽しい。
ベンダープレフィックスを気にせずにjQueryの書き方で回転や斜め変形（？）などがすいすい実装できます。
いろいろ組み合わせるのも簡単そうなので、面白いアニメーションが出来そうですね！

＞ デモは公式より

コードはこんな感じでした。

<div id="main">
<ul>
<li id="move1"><p>テスト</p></li>
<li id="move2"><p>テスト</p></li>
<li id="move3"><p>テスト</p></li>
<li id="move4"><p>テスト</p></li>
<li id="move5"><p>テスト</p></li>
</ul>
</div>

<script type="text/javascript" src="jquery-1.10.2.js"></script>
<script type="text/javascript" src="jquery.transit.min_.js"></script>

//移動
$(function(){
$('#main li#move1 p').hover(
function(){$(this).transition({ x: '40px', y: '40px' })},
function(){$(this).transition({ x: '0px', y: '0px' })}
);

//回転
$('#main li#move2 p').hover(
function(){$(this).transition({ rotate: '180deg' },1000,'ease')},
function(){$(this).transition({ rotate: '0deg' })}
);

//変形
$('#main li#move3 p').hover(
function(){$(this).transition({ skewY: '50deg' },1000,'ease')},
function(){$(this).transition({ skewY: '00deg' })}
);

//3D回転
$('#main li#move4 p').hover(
function(){$(this).transition({
  perspective: '100px',
  rotate3d: '1,1,0,180deg'
});},
function(){$(this).transition({
  perspective: '100px',
  rotate3d: '1,1,0,0deg'
},1000,'ease');}
);

//複数の組み合わせ
$('#main li#move5 p').hover(
function(){$(this)
  .transition({ x: -40 })
  .transition({ y: 40 })
  .transition({ x: 0 })
  .transition({ y: 0 });
},
function(){$(this)
  .transition({ x: 0 });
});
});

Web制作の現場で使う jQueryデザイン入門［改訂新版] (アスキー書籍)
ー Amazon.co.jpで買う