3D 変換とアニメーション

HTML ※Web開発
3D Transforms and Animations < CSS | The Art of Web
Early examples of implementing CSS transform in three dimensions in WebKit and Mozilla browsers.
www.the-art-of-web.com

3D 変換は、Safari/WebKit チームによってかなり昔に初めて実装されました。他のブラウザでのサポートはまだ不安定ですが、改善されつつあります。

CSS3 アニメーションと 2D 変換は Safari、Firefox、Opera、さらには Internet Explorer 10 にも実装されていますが、この記事ではキーフレームを使用してさらに一歩進んで、3D 空間で永続的なアニメーション効果を設定します。

これらの効果は、WebKit (Safari/iPhone/iPad および Chrome) および Mozilla (Firefox) ブラウザーで動作します。よりシンプルな効果の一部は Internet Explorer 10 でも動作しますが、適切な 3D レイアウトに必要なpreserve-3d設定はサポートされていません。

1. キーフレームの設定

キーフレームとは何ですか?

@-webkit-keyframes ブロックには、キーフレームと呼ばれるルール セットが含まれています。キーフレームは、アニメーション内のその瞬間に適用されるスタイルを定義します。アニメーション エンジンは、キーフレーム間のスタイルをスムーズに補間します。

これは複雑に聞こえるかもしれませんが、最も単純な例の 1 つから始めます。ここで定義されているキーフレーム ブロックは、要素または要素のグループを Y 軸 (ページの上部を指す) を中心に反時計回りに回転するだけです。

<style>

  /* WebKit and Opera browsers */
  @-webkit-keyframes spinner {
    from { -webkit-transform: rotateY(0deg);    }
    to   { -webkit-transform: rotateY(-360deg); }
  }

  /* all other browsers */
  @keyframes spinner {
    from {
      -moz-transform: rotateY(0deg);
      -ms-transform: rotateY(0deg);
      transform: rotateY(0deg);
    }
    to {
      -moz-transform: rotateY(-360deg);
      -ms-transform: rotateY(-360deg);
      transform: rotateY(-360deg);
    }
  }

</style>

この例では、後で参照できるようにキーフレームに「スピナー」という名前が割り当てられています。「from」と「to」の間に追加のステップを挿入できます。各ステップでは、from/to キーワードの代わりにパーセンテージ値を使用し、さまざまな種類のスタイルと変換を含めることができます。

2. アニメーションの舞台設定

「ステージ」は、アニメーションが実行される要素です。アニメーションは、ステージ要素に応じて移動および回転しますが、ステージ要素自体はページに固定されたままです。

オプションのperspective属性は、要素が Z 軸に沿って上下に移動する (ページから外に出る) ときに 3D 効果がどの程度強くなるかを定義します。この距離が大きいほど、効果は目立たなくなります。この属性がないと、遠近感はまったくありません。

<style>

  #stage {
    margin: 1em auto;
    -webkit-perspective: 1200px;
    -moz-perspective: 1200px;
    -ms-perspective: 1200px;
    perspective: 1200px;
  }

</style>

次の要素は、アニメーションが適用される要素です。これは、キーフレームを名前で参照することで行います。また、遷移タイミング関数を定義し、反復回数 (この場合は永久運動のため無限) を設定します。各反復は 6 秒間続きます。

より物理的にリアルなアニメーションを作成したい場合は、ブロック内の個々のキーフレームごとに異なるタイミング関数を割り当てることができます。

<style>

  #spinner {
    -webkit-animation-name: spinner;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 6s;

    animation-name: spinner;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-duration: 6s;

    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
  }

  #spinner:hover {
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
  }

</style>

ホバー効果により、マウスが要素の上にあるときにアニメーションが一時停止します。このプロパティは、JavaScript を使用して「実行中」と「一時停止」を切り替えて、アニメーションの状態を制御することもできます。

この要素に関連して他の要素を変換できるようにするには、preserve-3d設定が重要です。この設定がないと、すべての子要素が同じ平面でフラットにレンダリングされます。

Chrome 12.0 より前では、perspective 属性も preserve-3d属性も認識されなかったため、3D アニメーションはすべて「平坦化」されていました。これはそれ以降のバージョンでは対処されていますが、 Internet Explorer 11 ではpreserve-3dがまだ欠落しています。

タイミング関数を 「ease-in-out」に設定し、新しいプロパティ -webkit-animation-direction: alternate;を追加することで、興味深い効果を実現できます。これにより、最初に一方向に回転し、次に反対方向に回転するアニメーションが作成されます。

タイトルとURLをコピーしました