CSS3アニメーション【第四回目】

初めまして
今回担当させて頂く”遠藤”です。
よろしくお願いします！

私は"株式会社ブレーンネット"の社員として、主にJavaでのWebサイト構築案件に多く携わってきました。
第二回目、第五回目担当の"板敷"さん、第三回目担当の"手塚"さんとも、いくつかの案件をご一緒させて頂いております。
その中で、「これからは、システムもCSSくらい出来なきゃやっていけないよ！」と活を入れられたこともあり、今までデザイナー任せだったCSSを勉強してみることにしました。

今回は、CSS3にて追加された新機能の 2D/3D変形や簡易アニメーションを利用してみたいと思います。

CSSトランスフォーム

まずは、CSSトランスフォームを使って、回転や拡大縮小等の変形を行ってみたいと思います。

CSSトランスフォームは要素を変形させるスタイルです。
変形の種類は2D(平面)と3D(立体)に大きく分けられます。

  • 2Dトランスフォーム

    • 2D変形にはrotate(回転)、scale(拡大縮小)、translate(平行移動)、skew(斜変形)の4種類があります。
    現時点ではtransformプロパティに※1ベンダープレフィックスを付ける必要があります。

    表1.主要ブラウザのベンダープレフィックス
    値の種類意味
    -moz-Firefox
    -webkit-Google Chrome、Safari
    -o-Opera
    -ms-Internet Explorer

    今回はGoogle Chrome での動作を想定していますので、「-webkit-」を付けることとします。

    • rotate関数

      • rotate関数には、回転角度を指定します。
      rotate関数の例
      -webkit-transform: rotate(-15deg);
      $Web“波”2.0-rotate
      回転角度に"-15"を指定したので、左に15度傾いています。プラスの値を指定すれば右に傾きます。

    • scale関数

      • scale関数には、横と縦の変形率を指定します。1.0が等倍、2.0で2倍、0.5で半分のサイズとなります。
      scale関数の例
      -webkit-transform: scale(0.7, 1.7);
      $Web“波”2.0-scale
      横に"0.7"を指定しているので縮んでいます。縦には"1.7"を指定しているので伸びています。

  • 3Dトランスフォーム

    • 3Dトランスフォームは、立体的な変形を行います。
    3Dトランスフォームを行うには、先ず変形させたい要素の親のスタイルにtransform-styleプロパティを追加し、「preserve-3d」を指定します。最低限必要なのはこれだけです。
    3Dトランスフォーム利用例
    -webkit-transform-style: preserve-3d;
    -webkit-transform: rotateX(190deg);  ・・・(1)
    -webkit-transform: rotateY(190deg);  ・・・(2)
    -webkit-transform: rotateZ(190deg);  ・・・(3)

    $Web“波”2.0-rotateXYZ
    (1)X軸を中心に190度回転するので、上下逆さまになったように見えます。
    (2)Y軸を中心に190度回転するので、左右が逆になったように見えます。
    (3)Z軸を中心に190度回転するので、上下左右が逆になったように見えます。

CSSでアニメーションする

CSS3では、CSSだけで要素をアニメーションさせることができます。
CSSによるアニメーションは、transitionプロパティを使うCSSトランジションと、animationプロパティを使うCSSアニメーションの2種類が用意されています。

  • CSSアニメーション

    • CSSトランジションは再生時間とタイミング程度しか設定できないのに対し、CSSアニメーションは細かい制御が可能です。
    CSSアニメーションでは、「いつ何をどう変化させるか」という情報(キーフレーム)をまとめた、進行表のようなものを作ります。

    アニメーション開始時点を0%、終了時を100%とし、途中段階でのCSSプロパティの変化を記述します。
    キーフレームの例
    @-webkit-keyframes fade {
      0% {opacity: 0;}
      25% {opacity: 0.3;}
      50% {opacity: 0.5;}
      70% {opacity: 0.7;}
      100% {opacity: 1.0;}
    }

    後は、アニメーションさせたい要素のスタイルにanimationプロパティを追加し、利用するアニメーション名、再生時間などを設定します。
    animationプロパティの例
    -webkit-animation-name: fade;
    -webkit-animation-duration: 4s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;

    $Web“波”2.0-fade
    4秒かけて画像が少しずつ表示されていきます。

    表2.animationプロパティのパラメータ
    値の種類意味
    animation-name使用するアニメーション名
    animation-duration再生時間を秒数で指定
    animation-timing-functionアニメーションのタイミングを調整する
    animation-delayアニメーションの開始時間を遅らせる
    animation-iteration-count繰り返しの回数。infiniteを指定すると、無限に繰り返し再生される
    animation-directionalternateを指定すると、順方向と逆方向のアニメーションが交互に繰り返される


計算ゲーム

では、上記の機能を用いて、計算ゲームの結果表示部分を作成したいと思います。

スタイル定義
#msgArea {
  position: absolute;

  -webkit-transform-style: preserve-3d;
  -webkit-animation-name: rotate, fade;    ・・・(1)
  -webkit-animation-duration: 3s;          ・・・(2)
  -webkit-animation-timing-function: ease; ・・・(3)
  -webkit-animation-iteration-count: 1;    ・・・(4)
}
(1)回転とフェードインするアクションを定義しています。
(2)3秒かけて再生します。
(3)開始と完了を滑らかにする指定をしています。
(4)1回再生したら終了します。

くるくる回るアニメーション
@-webkit-keyframes rotate {
  0% {-webkit-transform: rotate(0deg) rotateY(0) scale(1.0)}
  50% {-webkit-transform: rotate(720deg) rotateY(0) scale(2.0)}
  100% {-webkit-transform: rotate(720deg) rotateY(720deg) scale(1.0)}
}
rotate関数にて、2Dの回転を定義しています。
rotateY関数にて、Y軸を起点に回転させています。
scale関数にて拡大縮小させています。

フェードインするアニメーション
@-webkit-keyframes fade {
  0% {opacity: 0.0;}
  25% {opacity: 0.2;}
  50% {opacity: 0.5;}
  75% {opacity: 0.7;}
  100% {opacity: 1.0;}
}
opacity関数にて、徐々に表示されるように指定しています。

今回作成したアニメーションは、あくまで一例にすぎませんので、いろいろな組み合わせでお気に入りのアニメーションを作成してみてはいかがでしょうか。

次回

次回は「計算機能 & その他機能」です。計算ゲームも完成の回となりますので、ご期待ください。
担当の”板敷”さんエッジの効いた解説よろしくおねがいします！


ペタしてね読者登録してね