http://imgur.com/upRtiのような HTML 5、CSS、jQuery (アニメーション) を使用してレイアウトを作成したいと思います。タイルの複数の配置間の遷移をアニメーション化したいと思います。たとえば、このようなタイルまたはボックスのセットと、このhttp://imgur.com/3ukp8のようなボックスまたはタイルの同様のセットの間。(説明のために、2 番目の画像は 1 番目の画像を回転しただけですが、ボックス/タイルの任意の組み合わせと編成を期待できます)。
ボックスを整理する方法は無限にある可能性があるため、アニメーションはボタンを押すことでトリガーされ、再利用できる必要があります。トランジションを次のように機能させたい: 各ボックスは独立したパスで画面の右側に向かって移動し、新しいボックスは独自の独立したパスで左側から移動します。アニメーション全体を独自の div に制限して、ページ上の他の要素 (ナビゲーション バーなど) に干渉しないようにしたいと考えています。最後の制約は、これをほとんどの最新のブラウザー (理想的には IE 8 と 9 も) で動作させたいということです。
ボックス (両方のセット) をマークアップする最も適切な方法は何ですか? 良いアニメーション機能とは？