css animation/jquery animation/velocity animation

CSS transition： Scene1

CSS transition： Scene2

CSS transition： Scene3

$().animate()： Scene2

$().animate()： Scene5

$().animate()： Scene6

jQueryAnimateでは操作出来ないcolorも変更できる。

$().velocity()： Scene7

$().velocity()： Scene8

$().velocity()： Scene9

CSSアニメーションの完了イベント（transitionend/MSTransitionEnd/webkitTransitionEnd/oTransitionEnd）は、
変更したCSSプロパティの個数の回数呼ばれる。
「margin,padding,color」を変更した場合は、3回イベントが発火する。
回避方法：
$("#xxx").off('transitionend MSTransitionEnd webkitTransitionEnd oTransitionEnd')してあげる。
※CSS3を動的にはサワレナイ。
触る場合は、stepプロパティ（$("#xxx").animate({....},{step:function(){...},dulation:1000})）を指定するか、
CSSで、transitionを指定しておき、$("#xxx").css({....})とでアニメーションさせる。