|
HTML5＋CSS3 |
CSS3編
|
| Lesson 12 | CSS3を利用した 変形とアニメーション |
|||
| 制作・文 | 制作・文／藤沢立也（ Suika Cube Inc.） |
 |
Web サイトでアニメーションが必要な場合、これまではFLASHやJavaScriptなどを使うしかなかったが、CSS3ではアニメーションをわずかなコードで簡単に実装できる。 |
01
transformは文字や画像などの要素に拡大・縮小や回転などの変形を適用するプロパティだ。これによって画像、フォントなどの形状を簡単に変形でき る。なお、本稿執筆時点（2011 年3月）では実装時に「ベンダープレフィックス」 をつけないと動作しないので注意（ベンダープレフィックスの詳細についてはLesson 02を参照）。transformプロパティの基本的なファンクションは次のとおりだ。・rotateファンクション
要素を回転する【1-1】
・skewファンクション
要素を傾斜する【1-2】
・translateファンクション
要素を横方向、縦方向に移動する【1-3】
・scaleファンクション
要素を拡大・縮小する【1-4】。
【1-1】rotate( 角度deg) の値には時計回りの角度を指定（負の値を指定すれば反時計回りになる）
【1-2】skew(横の角度deg,縦の角度deg)の値には角度を指定（負の値を入れれば反対に傾斜）、縦の角度は省略可能（省略時には自動的に0が入る）
【1-3】translate( 右への移動距離,下への移動距離)の値には移動距離をピクセルや％で指定（負の値をすればそれぞれ左、上へ移動する）。下への移動距離は省略可能（省略時は自動的に0が入る）
【1-4】scale( 横比率,縦比率)の値には比率を数値か％で指定。縦の比率は省略可能（省略時には横の比率が縦にも適用される）
02
実際にtransformプロパティのファンクションを使ったテクニックを紹介しよう。scaleファンクションを使って画像をマウスオーバーで拡大する。まずに表示される画像をscaleファンクションで縮小サイズを設定し、その後hover 擬似クラスに等倍サイズを設定する【2-1】。
【2-1】画像をscaleファンクションで縮小してサムネイルにし、マウスオーバーしたら等倍に戻す
03
同じ色がそれぞれどのように表されるかを見てみよう。純色の赤を表示したい場合の比較が【3-1】だ。緑の場合は【3-2】、青の場合は【3-3】になる。16進数指定とrgb指定は進数が異なるのみで、色の値を直接指定していることに変わりはない。対してhsl 指定ではHueの値の変化のみで赤、緑、青を表現できる。決まった色を表示する際は16進数指定やrgb指定を用い、色の変化などを直感的に扱いたい場合はhsl指定を用いるとよいだろう。
【3-1】プロパティは、transformプロパティを用いて要素を変形させるときの起点を指定する際に使用する左端中央に指定した場合は（右）、指定しなかった場合は50% 50%（要素の中央）が自動的に指定される（左）
具体的な指定の方法は次のとおり
パーセンテージ
変形を適用する要素の左上位置(0%,0%)からのパーセンテージ、デフォルトでは(50%,50%)が指定されている
座標
変形を適用する要素の左上位置(0,0)からの座標を指定
キーワード
水平方向はleft・center・right、垂直方向はtop・center・bottomの各キーワードで指定
04
transformで要素を変形することはできるものの、瞬間的に変形が終了してしまうので、変形の過程を連続的に表示できない。時間による変化を適用できるのがtransitionプロパティだ。具体的な使い方についてみていこう。
・transitionプロパティ
以下のプロパティを同時に指定できる
・transition-propertyプロパティ
どのプロパティにtransitionを適用させるかを指定
・transition-durationプロパティ
変化にかける時間を指定。単位はs（秒）
・transition-timing-functionプロパティ
変化の仕方を指定。指定できる値は6種類（【4-1】参照）。
まずtransition-property にback groundcolorを指定し、時間の経過ごとに背景色が変化していくアニメーションをつくってみる【4-2】。transitionで変化させることができるプロパティは、1種類だけとは限らない。背景色に加えて文字色も同時に変化するアニメーションも実 装できる【4-3】。
【4-1】
【4-2】transition: 変化させるプロパティ 変化時間変化の仕方 の順で指定。これだけのコードでCSSの様々なプロパティをアニメーションさせることができる
【4-3】カンマで区切ることによって複数のプロパティを指定することができる。マウスオーバーで背景色と文字色を入れ替えるアニメーションだ
