CSS3によるTransition Effects 30

最近、はてブでも話題になったAppleのHTML5 Showcase。
iPhoneやらiPadのWebApp開発の勉強として、HTML5やCSS3についてもう少し勉強しておこうということで、差し当たってHTML5 Showcaseを参考にTransition Effects Sampleを作って見ました。
CSS3 Transitions Collection 30（Safari4以上で閲覧してください）

作ったEffectはHTML5 Showcaseで紹介されていたものを含めて30種類。
おなじみの「Cube」やアニメの登場のような「Squish」、Appleタイムマシンのような奥行きをイメージした「Flip Switch」、キーノートのEffectにあるような「Revolve」「Reflection」「Swap」なんかも用意しました。
中にはオリジナルのものもあります。（Fade WaveとかFlagとかね）
CSS3 Transitions Collection 30（Safari4以上で閲覧してください）

SafariをベースにしたCSS3 Transition Effectの簡単な解説

次期CSSバージョンのCSS3は、ブラウザによって実装状況がまちまちですが、SafariはCSS3の多くを先に実装しているブラウザです（でも「-webkit-transform」みたいに特殊な書き方のモノが多いですが）。
とはいえ、SafariはiPhoneやiPadにデフォルトブラウザとして搭載されているブラウザなので、iPhoneやiPad用のWebApplicationを作るにあたってはSafariで動くことを考えればいいのですね。

CSSアニメーションの大まかなポイント

CSSでアニメーションさせるにあたってポイントとなるのは以下のプロパティです。ひとつずつ解説します。
「-webkit-animation-duration」
「-webkit-animation-iteration-count」
「-webkit-animation-name」
「-webkit-animation-timing-function」
「-webkit-perspective」「-webkit-transform」
「@-webkit-keyframes」

「-webkit-animation-duration」

アニメーションが動作する時間のプロパティです。1回を1秒間で動作させる場合は「1s」という具合に指定します。「0.75s」というふうに細かい指定もできます。

「-webkit-animation-iteration-count」

アニメーションの動作回数を指定するプロパティです。一度だけ動作させる場合は「1」を指定。ずっと動作させておきたい場合は「infinite」を指定します。

「-webkit-animation-name」

実行するアニメーション名を指定します。アニメーション名は後に紹介する「@-webkit-keyframes」で定義できます。

「-webkit-animation-timing-function」

アニメーションのeasing処理の設定ができます。指定できるパラメータは、「ease」「linear」「ease-in」「ease-out」「ease-in-out」です（「cubic-bezier」で細かい指定もできるみたい。詳しくはSafari CSS Referenceを参照してください）。

「-webkit-perspective」

3D処理をする場合の遠近度合いを調整します。0に近づくほど遠近度合いが強くなり、5000ぐらいだとほとんど2Dと同じような見え方になります。

「-webkit-transform」

オブジェクトの移動（translate）やら拡大縮小（scale）やら回転（rotate）を操作するプロパティです。
「-webkit-transform-style: preserve-3d;」を指定しておくと３次元の立体的な処理も可能です。
例：-webkit-transform

-webkit-transform: rotate(-30deg) scale(1.3) translate(-20px,-250px);

また、「-webkit-transform-origin」でtransformの原点を指定することが可能です。

「@-webkit-keyframes」

「-webkit-animation-name」で指定するアニメーションの名前を定義し、そのアニメーションのキーフレームを指定できます。キーフレームは%単位で0%〜100%で指定します。
例：Cube

0% { -webkit-transform: rotateX(0); }
50% { -webkit-transform: rotateX(-92deg); }
70% { -webkit-transform: rotateX(-84deg); }
80% { -webkit-transform: rotateX(-90deg); }
95% { -webkit-transform: rotateX(-88deg); }
100% { -webkit-transform: rotateX(-90deg); }

今回のTransition Effectについて

今回作ったTransition EffectはJavascriptで.active cssClassを追加し、そのクラスに対してCSSアニメーションを付与しています。
だいぶ理解してきたのでiPadWebAppで何か面白いモノでも考えようと思います。

おまけのCSS3リフレクト処理

CSS3はCSSでオブジェクトのリフレクト処理を施せるプロパティが用意されている。「-webkit-box-reflect」だ。
「-webkit-box-reflect」は、リフレクトを掛ける方向･オフセット値･リフレクトのマスクの3つのパラメータからなる。
リフレクトを掛ける方向は、「right, left, above, below」の中から指定します。
マスクにはurlでpng画像を指定する方法や「-webkit-gradient」で指定する方法がある。
例：imgに鏡面反射を施す

-webkit-box-reflect: below 4px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(black));

ついでに「-webkit-gradient」も解説しておくと、次のような書き方になる。

-webkit-gradient(type, 開始位置, 終了位置, from(開始色), color-stop(途中色), to(終了色));

typeはグラデーション形式のパラメータで「linear（直線）」と「radial（放射状･円形）」で指定する。
開始位置･終了位置は「right bottom」とか「left top」などのように書く。
開始色･途中色･終了色はrgbaやWebカラーコードなどで指定できる。透明の場合はtransparentでもOK。

■ 参照
Safari CSS Reference

Tweet