CSSシークレット ―47のテクニックでCSSを自在に操る

知っておくべきポイント

CSSアニメーション、CSSトランスフォーム、 P.120の「平行四辺

形」、 P.124の「ひし形の画像」、 P.342の「点滅」

課題

数年前に CSS アニメーションが生まれたばかりの頃、 ChrisCoyier

（css‐tricks.com）は円に沿って動くアニメーションを CSS だけで行え

ないかどうか筆者に尋ねました。当時はCSSを使った実験のようなもので

し た が、 そ の 後 実 例 を 何 度も 目 に す る こ とに な り ま した 。 例 え ば

Google+ では、サークルに 12 人目以降のメンバーを加えようとするとこ

のようなアニメーションが発生します。既存のメンバーのアバターが、新

しいメンバーの居場所を空けるように円形のパスに沿って移動します。

もう1 つの楽しい例が、ロシアの技術系 Web サイト「habrahabr.ru」

で見られます（図 8.34 ）。404 のエラーページでは、サイト内の主要な

ページへのナビゲーションメニューを示すことが望まれます。このサイト

では、それぞれのメニュー項目が円軌道を周回する惑星として表現されて

おり、上部には「どの惑星に移動しますか」と表示されています。周回は

していますが、自身が回転しているわけではありません。テキストが上下

逆になったり、裏返ったりすることもありません。

円に沿って動く

アニメーション

47

360

8章：トランジションとアニメーション

図8.33

Google+ で