CSSを使用してフルページアニメーションを作成する方法

キーテイクアウト

• フルページアニメーションは、CSS 3Dおよび2D変換とCSSアニメーションを使用して作成でき、Webコンテンツの従来のスクリプトベースのアニメーションに優れた柔軟な代替品を提供します。 HTML要素は、CSSアニメーションを使用してこれらの効果を実現することができます。 CSSを適用するときに一貫した結果を確保するために、その内容のサイズに関係なく、要素に変換されると、ボディ要素のサイズはブラウザウィンドウのサイズに固定でき、コンテンツはラッパー内に追加できます。このアプローチは、複雑なコンテンツで発生する可能性のあるプログレッシブレンダリング、再レイアウト、またはリソースの読み込みをマスクすることもできます。
ブラウジングエクスペリエンス中に戦略的な時期にアニメーションを設定して、ページがロードされ、ユーザーがリンクをクリックしたときに表示されたときにコンテンツの外観を表示することができます。ページコンテンツを視界に遷移するアニメーションをセットアップする最適な場所は、要素の上部にインラインです。 AnimationEndイベントを使用して、アニメーションがいつ完了したかを検出してから、ナビゲーションイベントをトリガーできます。
• インターネットエクスプローラー10のような最新のブラウザ10は、CSS 3Dおよび2D変換とCSSアニメーションをサポートしています。 GPUのパワーをタップし、通常のJavaScriptから非同期に実行することにより、これらのテクノロジーは、Webコンテンツの従来のスクリプトベースのアニメーションに対して、よりパフォーマンスのある柔軟な代替品を提供します。
以前の記事では、CSS 3D変換とCSSアニメーションと遷移を使用して構築する方法について話しました。 この記事では、ナビゲーションプロセス中に使用できる「フルページアニメーション」の概念を説明することにより、これらのテクノロジーに、より「型破りな」ユースケースを紹介して、閲覧に流動性と連続性を追加します。私たちの目標は、ユーザーがページにアクセスしてリンクをクリックしたり、関連するアクションを実行したりすると、ユーザーがページにアクセスして移行するときにコンテンツがスムーズに表示されるシームレスなブラウジングエクスペリエンスを実現することです。
• これらの効果は、CSSアニメーションを使用してHTML 要素を変換することで実現できます。ただし、このユースケースは、レイアウトやサイジングの変換に対するサイジングの効果や、アニメーションと適切にメッシュするように適切にページナビゲーションを適切に行う方法など、議論に値すると感じたいくつかの考慮事項を示しています。 > この投稿のコードサンプルは、IE10リリースプレビューでサポートされているように、再固定されていないCSSマークアップを使用します。他のブラウザには、CSSアニメーションのベンダープレフィックスが必要になる場合があり、使用されるCSS変換プロパティを変換します。
ページのコンテンツ全体の変換

CSS変換は、HTML DOM要素のスタイル特性で定義されています。たとえば、Z軸に沿って45度に沿って要素を回転させるためのマークアップは次のようになります。

#element {
    transform: rotateZ(45deg);
}

HTMLドキュメントの

要素に変換を添付すると、まったく同じように機能します。したがって、ドキュメントのに同じ効果を宣言的に追加するために実行すると、次のようなことができます。

body {
    transform: rotateZ(45deg);
}

ボディ要素に変換を適用するときに、ページの前後のショットを見てみましょう：

rotatez（45deg）の適用ドキュメントのボディ要素に変換。 3次元変換の場合、CSS変換仕様は、変換する要素の親に指定できる視点プロパティを定義します。コンテンツの要素を変換するときは、Dom階層にその上にある要素に適用する必要があります。そうすることは簡単です：

これを要素の回転（45deg）変換と組み合わせると、次の結果が得られます。

html {
    perspective: 500px;
}

視点で回転する（45Deg）変換をに適用する：500px 。

に設定 興味深い結果を得るために、ボディ要素の変換オリジンプロパティを操作できます。いくつかの例を見てみましょう： 上記のマークアップは、変換オリジンを使用して回転の原点を要素の底に移動しながら、ボディ要素のxに沿った回転を設定します。事実上、これにより、ドキュメントの内容がこのように画面の「内容」を回転させます。

body {
    transform-origin: 50% 100%;
    transform: rotateX(45deg);
}

ドキュメントのルート要素上の視点オリジンプロパティを操作して、軸外投影効果を実現することもできます。 のスタイルを次のように変更します 私たちのページは次のようになりました：

html {
    perspective: 500px;
    perspective-origin: 90% 50%;
}

CSS変換を使用することにより、ページのコンテンツ全体の視覚的な外観を簡単に操作できます。通常のレイアウトとサイジングのルールがまだ適用されるため、ボディ要素（特にパーセンテージ値を使用したり、変換オリジンプロパティに依存しているもの）に変換されると、ページの内容に応じて異なる視覚効果をもたらす可能性があります。 Transform-Originが50％100％に設定された以前のRotatex（45Deg）の例を思い出してください。

以下では、変換が適用される前後の結果を見ることができます。

コンテンツが実際にウィンドウの下部にピボットするのではなく、ビューポートの外側のある時点でどのようにピボットするかに注意してください。これは、CSS変換の予想される動作です。

は正常にレイアウトされ、画面外のどこかにある下端に沿って回転します。また、変換されたコンテンツに対応するために、コンテンツの実際のフットプリントが拡張されていることに気付きます（「後」画像のスクロールバーを見てください）発音）。

では、変換を身体要素に適用する際に、任意のサイズのコンテンツをどのように扱うのでしょうか？身体のサイズが特定の量を超えて拡大しないようにするために、すべてのコンテンツをカスタマイズすることは非現実的である可能性があります。代わりに、シンプルなHTML/CSSパターンを使用して、ボディ要素のサイズをブラウザウィンドウのサイズに固定し、ラッパー

にコンテンツを追加できます。次のマークアップは、まさにそれを達成します：

#element {
    transform: rotateZ(45deg);
}

以下の図は、ページが垂直にスクロールされたときに何が起こるかを示しており、ドキュメントの

要素に直接（左）要素にrotatey（45deg）変換を適用し、ラッパーパターンを使用して（右）（右）：

変換の直接的な適用は、軸外投影のために歪んだ視覚的結果をもたらします（身体要素の「中心」を見ていないため）。ラッパーパターンを使用すると、要素の視点オリジンプロパティ（デフォルトでは50％50％）が常に

要素に関連して正しく中心になり、心地よい視覚効果が得られます。 上記のパターンを利用して、可能な場合はパーセント値でCSS変換をセットアップすることにより、その内容のサイズに関係なく、要素に一貫した方法で影響を与えることができます。 変換からアニメーションへの

要素にCSS変換を適用する複雑さを整理したことで、CSSアニメーションは次のステップです。上記の原則に従うことにより、興味深い方法でWebコンテンツを視野に入れる（または削除する）アニメーションを作成できます。

このBasic @KeyFramesルールを検討してください：

要素に適用されると、このアニメーションは左側で回転させます。ラッパーパターンを使用する要素に適用すると、視覚的な結果がより興味深いものになります。ドキュメントは、実際にはブラウザウィンドウの可視領域の外側からフルビューに回転します。

body {
    transform: rotateZ(45deg);
}

同様に、Webコンテンツを視界から流動的に削除するアニメーションを作成できます。たとえば、回転中にページを遠くに消えたい場合は、次のようなものを使用できます。

#element {
    transform: rotateZ(45deg);
}

視覚的な結果は

です

CSSアニメーションのフルパワーを使用してWebコンテンツ全体に影響を与えることができるため、これらのページ効果を生成するという点では多くの柔軟性があります（CSS変換を使用するだけではありません）。しかし、コンテンツに適用したい効果を構成したら、ページナビゲーションプロセス中にどのようにトリガーするのでしょうか？

アニメーションを

に添付します

私たちの目標は、ブラウザエクスペリエンス中に戦略的な時期にトリガーアニメーションを使用して、ページがロードされたときにコンテンツの外観を表示し、ユーザーがリンクをクリックしたときに見えないようにすることです。

ボディ要素にアニメーションを追加する最初の直感的な場所は、オンロードJavaScriptイベントです。しかし、判明したように、オンロード火災が実際には手遅れになったときにアニメーションを追加します。このイベントは、実際にページのコンテンツ全体が読み込みが終了したときにトリガーされます（画像やその他の帯域幅集約型リソースを含む）。帯域幅集約型のページでアニメーションをオンロードに添付すると、コンテンツが「通常」に表示され、その後、アニメーションがトリガーをトリガーしてコンテンツを表示します。私たちが目指していた効果ではありません 代わりに、ブラウザがコンテンツのDOM構造の解析を終了したときにトリガーするドンコンテンテントロードのイベントを利用することができます（ただし、リソースがロードが終了する前に潜在的に）。 IEテストドライブDomContentLoadedデモは、これら2つのイベントの違いを示しています。ただし、複雑なWebコンテンツの場合、最新のブラウザは「プログレッシブ」レンダリングを実行することを選択でき、DOMツリー全体がロードされる前にページを表示することができます。これらの状況では、視覚的な結果はオンロードシナリオに似ています。

視界でページコンテンツを遷移するアニメーションをセットアップする最適な場所は、要素の上部にインラインです。これにより、コンテンツがレンダリングされているときにアニメーションが正しく開始されます（およびコンテンツの開始位置は、選択したアニメーションのキーフレームの開始位置になります）。このアプローチの快適な副作用は、アニメーションが実際に、複雑なコンテンツで発生する可能性のあるプログレッシブレンダリング、再レイアウト、またはリソースの読み込みをマスクする可能性があることです。

コンテンツを視界から外すアニメーションを設定することも興味深いものです。コンテンツの関心のあるすべての要素（たとえばすべてのタグ）にオンクリックハンドラーを添付し、コールバック関数で関連するアニメーションプロパティ（アニメーション名、アニメーション寿命など）を設定できると仮定することができます。 。ただし、実際にナビゲーションが発生を遅らせない場合、予想される流体の移行が表示されません。

これは、CSSアニメーションの仕様で説明されているアニメーションイベントを利用する良い機会です。特に、AnimationEndイベントを使用して、アニメーションがいつ完了したかを検出してから、ナビゲーションをトリガーすることができます（たとえば、window.location.hrefを設定して）。したがって、OnClickは「remof-from-view」アニメーションをトリガーし、

のAnimationEndのハンドラーを登録して、ナビゲーションイベントが発生することを保証します。

ライブデモが利用可能

ここで見せることができる以上の深さと例を提供するCSS変換とアニメーションでページを生き生きとさせるためのデモとチュートリアルを作成しました。チュートリアル自体は、Windows 8のInternet Explorer 10で動作するページナビゲーションと、ChromeとFirefoxの最近のバージョンで機能するページアニメーションを利用しています。

ページからページのアニメーションを楽しむだけで、各ページの右下隅にある「続行する」リンクを使用して、チュートリアルのページをステップスリートします。

チュートリアルの最後に、これらのアニメーションを独自のWebコンテンツに組み込む方法に関する追加のガイダンスとサンプルコードを提供します。

それを包みます

CSS変換とCSSアニメーションは、より豊かで没入型のWebエクスペリエンスを可能にする2つの強力な機能セットです。わずかな労力で、流動的でほとんどアプリのようなナビゲーションエクスペリエンスを提供するWebページ（静的なページでも）を作成できます。 この投稿を読んで楽しんだなら、あなたは学ぶことができるのが大好きです。マスターから新鮮なスキルとテクニックを学ぶ場所。メンバーは、実用的なCSSのようなすべてのSitePointの電子ブックやインタラクティブなオンラインコースに即座にアクセスできます。

フルページのCSSアニメーションに関するよくある質問

CSSアニメーションとJavaScriptアニメーションの重要な違いは何ですか？

CSSアニメーションとJavaScriptアニメーションは、Web要素をアニメーション化するという同じ目的を果たしますが、いくつかの重要な違いがあります。 CSSアニメーションは、特にシンプルなアニメーションの場合、よりシンプルで簡単に実装できます。また、ブラウザのレンダリングエンジンによって処理されているため、パフォーマンスに優しいです。ただし、CSSアニメーションは、JavaScriptアニメーションと比較して、制御と柔軟性が制限されています。一方、JavaScriptアニメーションは、より制御と柔軟性を提供し、複雑なアニメーションを可能にします。リアルタイムで一時停止、逆転、または操作することができ、ユーザーインタラクションにも応答することができます。ピクセルのような絶対ユニットの代わりに、パーセンテージやビューポートユニットなどのユニット。これにより、画面サイズに関係なくアニメーションが適切にスケーリングされることが保証されます。メディアクエリを使用して、特定の画面サイズまたはデバイスの種類に基づいてアニメーションを調整することもできます。

CSSでループアニメーションを作成するにはどうすればよいですか？ -iteration-countプロパティ。その値を無限に設定することにより、アニメーションは無期限に繰り返されます。財産。このプロパティは、アニメーションが1つのサイクルを完了するのにかかる時間の長さを定義します。 。その値を一時停止に設定することにより、アニメーションは実行を停止します。

CSSでバックグラウンドイメージプロパティをアニメーション化できますか？ただし、不透明なプロパティを使用して複数の背景画像間でフェードすることで同様の効果を達成できます。

以上がCSSを使用してフルページアニメーションを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。