CSS3 アニメーションを使用してスムーズなページ読み込みを実現する方法

この記事では、CSS3 アニメーションを使用してページの読み込みをスムーズにする方法を紹介します。必要な場合は参考にしてください。

私は、Apple.com の製品ページで見たいくつかの微妙なアニメーションに感銘を受けました。通常、ページの読み込み時に再生されるアニメーションから始まり、スライド/フェードインによって要素がページ上に導入されます。とても繊細ですが、ユーザーにとってはとても満足のいくものです。

最近、波紋のない単純なアニメーション効果を追加すると、エクスペリエンスが台無しになる問題がいくつか見つかりました。

ページの読み込み時にアニメーションを再生する場合の問題は、多くのリソース (DOM を操作する画像やスクリプトを含む) によってブラウザーの再描画/再レイアウトが発生することです。これにより、アニメーションを再生しようとするとブラウザのリソースと競合し、フレーム落ちが発生します。 (推奨チュートリアル: css3 ビデオ チュートリアル )

回避策の 1 つは、アニメーションの開始を遅らせて、アニメーションが再生される前にページを描画できるようにすることです。

通常、要素がページに導入/表示されると、その要素は非表示になり (不透明度: 0)、時間の経過とともに完全な不透明度になります。

アニメーション プロパティには「遅延」パラメーターがありますが、このパラメーターに時間を指定すると、最終フレームに指定された遅延長を持つ要素が表示されます。次に、要素を非表示にし、完全に不透明になるまでアニメーション化します。これは望ましくない影響です。遅延中に最後のキーフレームを見たくないのです。

遅延中に要素が表示されないようにするには、次の手順に従います。

1) アニメーション化する HTML 内に div を作成します。
2) CSS でファイル内にキーフレームを作成します。 (これらは基本的に物事がどのように変化するかを定義します。この場合は不透明度 0 から不透明度 100 です)

@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

3) CSS で div タグを作成し、アニメーション (継続時間、開始遅延など) を定義して、それをリンクします。キーフレーム

.fade-in {
    opacity:0;  /* make things invisible upon start */
    animation:fadeIn ease-in 1; /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */

    animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/

    animation-duration:1s;
    animation-delay: 1.5s}

キーは、

animation-fill-mode:forwards

と

opacity: 0

を組み合わせて使用​​することです。これにより、指定した遅延 (不透明度) の間、アニメーション化する要素が非表示になります。 : 0)、最後のキーフレームでアニメーションを強制的に停止します (不透明度: 1)。

以上がCSS3 アニメーションを使用してスムーズなページ読み込みを実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。