高機能アニメーション用ライブラリ「TweenMax」を使ってみました。
JavaScriptによるアニメーションのライブラリはいくつかありますが、その中でも「TweenMax」はパフォーマンスも高く、機能も豊富です。
サンプルはこちら

単純なアニメーションであれば、下記のように書くことができます。

1
2
//TweenMax.to(要素, 秒数, プロパティ);
TweenMax.to("#box1", 1, {scale:2});

もう少し複雑なアニメーションの場合には、TimelineLiteクラスを利用したほうが良いかもしれません。

1
2
var tl = new TimelineLite();
tl.to("#box2", 1, {scale:2}).to("#box2", 1, {rotation:90}).to("#box2", 1, {scale:1});

TimelineLiteクラスでは、メソッドチェーンで連続したアニメーションを作成できます。

上記では「TweenMax」「TimelineLite」を使っていますが、その他に「TweenLite」「TimelineMax」があります。
名称の通りMaxが付く方が全機能版で、Liteは軽量版になります。
SVGやCanvasにも使えるので、アニメーションの作成には重宝しそうです。

TweenMax(GSAP)