コミュニティ
学ぶ
ツールライブラリ
AIツール
レジャー
検索
日本語
ホームページ > ウェブフロントエンド > CSSチュートリアル > CSSのアニメーション化された入り口のための便利な小さなシステム

CSSのアニメーション化された入り口のための便利な小さなシステム

William Shakespeare
リリース： 2025-03-17 09:18:14
オリジナル
390 人が閲覧しました

CSSのアニメーション化された入り口のための便利な小さなシステム

ウェブサイトは単なる静的なドキュメントではなく、いくつかの詳細はウェブサイトをより鮮明で興味深いものにすることができます。 Webページのコンテンツが直接表示されず、ポップアップ、スライド、フェードイン、または回転した方法で表示される場合はどうなりますか？このようなアニメーションは必ずしも実用的ではありませんが、場合によっては、特定の要素にユーザーの注意を引き付け、要素間の区別を強化し、状態の変化を示すことさえできるため、完全に役に立たないこともあります。

そこで、CSSツールのセットを作成して、視野に入るときにアニメーション効果を要素に追加しました。はい、これは完全に純粋なCSS実装です。複数のアニメーションとバリエーションを提供するだけでなく、アニメーションのインターリーブ効果もサポートします。これは、シーンを作成するようなものです。

たとえば、このように：

これは本当にこのより高度なバージョンの単純化されたバージョンです。

最初にアニメーションの作成の基本を説明し、次に追加した詳細のいくつか、アニメーションをインターリーブする方法、およびそれらをHTML要素に適用する方法を紹介します。最後に、ユーザーの削減された動きの好みに関してこれをすべて達成する方法を確認します。

基本的な知識

コアのアイデアは、シンプルなCSS @keyframesアニメーションを追加し、ロード時にページをアニメーション化するために必要なものに適用することです。要素をフェードインしてopacity: 0からopacity: 1 ：

 .anime {
  アニメーション期間：0.5s;
  アニメーション名：アニメイトフェード。
  アニメーション遅延：0.5s;
  Animation-Fill-Mode：backwards;
}

@KeyFramesAnimate-fade {
  0％{不透明：0;
  100％{不透明：1}
}
ログイン後にコピー

ここには、Webサイトの残りの部分を最初に読み込むことができるように、0.5秒のanimation-delayもあることに注意してください。 animation-fill-mode: backwardsページが読み込まれているときに初期アニメーション状態がアクティブであることを確認するために使用されます。これがなければ、私たちのアニメーション要素は私たちが望む前にポップアップします。

私たちが怠け者なら、ここでやめることができます。ただし、CSS-Tricksの読者は確かに怠zyではないので、システムを使用してこの種のことを改善する方法を見てみましょう。

よりクールなアニメーション

1つまたは2つのアニメーションを使用するよりも、さまざまなアニメーションを使用する方が楽しいです。より多くのアニメーションを作成するために、たくさんの新しい@keyframesを作成する必要さえありません。新しいクラスの作成は非常に簡単です。アニメーションで使用されているフレームを変更し、常に同じように保つ必要があります。

CSSアニメーションの数はほとんど無制限です。 （Animate.styleを参照してください。これは巨大なコレクションです。） blur() 、 brightness() 、 saturate()などのCSSフィルター、そしてもちろんCSS変換を使用してより多くのバリアントを作成することもできます。

ただし、CSS変換を使用して要素を「ポップアップ」する新しいアニメーションクラスから始めましょう。

 .animate.pop {
  アニメーション期間：0.5s;
  Animation-Name：Animate-Pop;
  アニメーションタイミング機能：Cubic-Bezier（.26、.53、.74、1.48）;
}

@KeyFrames Animate-Pop {
  0％{
    不透明：0;
    変換：スケール（0.5、0.5）;
  }

  100％{
    不透明：1;
    変換：スケール（1、1）;
  }
}
ログイン後にコピー

リバウンドリバウンド効果のために、Lea Verouの不可欠なCubic-bezier.comから小さなcubic-bezier()時間曲線を追加しました。

遅延を追加します

私たちはもっとうまくやることができます！たとえば、さまざまな時期に要素をアニメーション化することができます。これにより、インターリーブ効果が生成され、多くのコードを必要とせずに複雑なモーションを作成します。

これは、CSSフィルター、CSS変換、3ページの要素で約10分の1秒のインターリーブアニメーションを使用して素晴らしいと感じています。

私たちが行うことは、要素がアニメーションに始まる時間を分離する各要素の新しいクラスを作成し、1秒の10分の1のanimation-delay値を使用して使用します。

 .delay-1 {animation-delay：0.6s}  
.delay-2 {アニメーション -  0.7s}
.delay-3 {Animation-delay：0.8s}
ログイン後にコピー

他のすべてはまったく同じです。ベースレイテンシは0.5Sであるため、これらのヘルパークラスはそこからカウントを開始します。

アクセシビリティの好みを尊重します

優れたWeb市民になり、スポーツの好みを削減できるユーザーのアニメーションを削除しましょう。

 @media画面と（還元モーションを好む：redument）{
  .Anime {アニメーション：なし！
}
ログイン後にコピー

このようにして、アニメーションはロードされず、要素は通常のように視野に入ります。 「減少」動きは、常に「除去」動きを意味するとは限りません。これは思い出させる価値があります。

HTML要素にアニメーションを適用します

これまでのところ、基本的なアニメーションと少し高度なアニメーションを見てきました。これを、インターリーブアニメーションの遅延（新しいクラスに含まれる）でより高度にすることができます。また、ユーザーのスポーツの好みを同時に尊重する方法も見られます。

これらの概念を示すリアルタイムのデモンストレーションはありますが、実際にはHTMLに作業を適用する方法をカバーしていません。クールなことは、Div、スパン、記事、ヘッダー、セクション、テーブル、フォームなど、ほぼすべての要素で使用できることです。

私たちがやろうとしていることは、3つのHTML要素でアニメーションシステムを使用したいと考えています。それぞれが3つのクラスを取得します。すべてのアニメーションコードを要素自体にハードコードできますが、それを分割すると、再利用可能なアニメーションシステムを取得できます。

  • Animate：これは、コアアニメーションの宣言と時間を含む基本クラスです。
  • アニメーションタイプ：以前の「ポップアップ」アニメーションを使用しますが、フェードインアニメーションも使用できます。このクラスは技術的にはオプションですが、さまざまな動きを適用するのに最適な方法です。
  • 。遅れ- ：前述のように、さまざまなクラスを作成して、各要素でアニメーションが開始される時間をリーーブして、きちんとした効果をもたらすことができます。このクラスもオプションです。

したがって、私たちのアニメーション要素は次のようになるかもしれません：

<h2> 1つ！</h2>
<h2>二！</h2>
<h2>三つ！</h2>
ログイン後にコピー

それらを数えましょう！

結論は

それをチェックしてください： @keyframes一見基本的なセットから始めて、視野に入る要素に興味深いアニメーションを適用するための完全なシステムに変えます。

もちろん、これは非常に興味深いです。しかし、私にとって最大のポイントは、私たちが見る例が、ベースライン、さまざまなタイプのアニメーション、インターリーブの遅延、ユーザーモーションの好みを尊重するために使用できる完全なシステムを形成することです。私にとって、これらはすべて、柔軟で使いやすいシステムの要素です。たくさんの余分なスクラップがなく、ほとんどのものがあまりありませんでした。

私たちが本当にカバーするものは、完全なアニメーションライブラリです。しかし、もちろん私はそこで止まりませんでした。すべてのCSSアニメーションファイルを提供しました。その中には、さまざまな遅延がある15のクラスを含むいくつかのアニメーションタイプがあり、物事をインターリーブするために使用できます。私は自分のプロジェクトでこれらを使用していますが、これはまだ初期版であり、それについてフィードバックを受け取りたいと思います。コメントであなたがどう思うか教えてください！

 /* ============================================================================================
Rogue AmoebaのNeale Van Fleetによるアニメーションシステム
=============================================================================================
.anime {
  アニメーション期間：0.75秒;
  アニメーション遅延：0.5s;
  アニメーション名：アニメイトフェード。
  アニメーションタイミング機能：Cubic-Bezier（.26、.53、.74、1.48）;
  Animation-Fill-Mode：backwards;
}

/ *フェードイン */
.animate.fade {
  アニメーション名：アニメイトフェード。
  アニメーション - タイミング機能：使いやすい;
}

@KeyFramesAnimate-fade {
  0％{不透明：0;
  100％{不透明：1}
}

/ *ポップイン */
.anime.pop {animation-name：animate-pop;

@KeyFrames Animate-Pop {
  0％{
    不透明：0;
    変換：スケール（0.5、0.5）;
  }
  100％{
    不透明：1;
    変換：スケール（1、1）;
  }
}

/ * blur in */
.animate.blur {
  アニメーション名：Animate-Blur;
  アニメーション - タイミング機能：使いやすい;
}

@KeyFrames Animate-Blur {
  0％{
    不透明：0;
    フィルター：Blur（15px）;
  }
  100％{
    不透明：1;
    フィルター：Blur（0px）;
  }
}

/ *輝く */
.animate.glow {
  Animation-Name：Animate-Glow;
  アニメーション - タイミング機能：使いやすい;
}

@KeyFrames Animate-Glow {
  0％{
    不透明：0;
    フィルター：明るさ（3）飽和（3）;
    変換：スケール（0.8、0.8）;
  }
  100％{
    不透明：1;
    フィルター：明るさ（1）飽和（1）;
    変換：スケール（1、1）;
  }
}

/ *成長 */
.Anime.Grow {Animation-Name：Animate-Grow;

@KeyFrames Animate-Grow {
  0％{
    不透明：0;
    変換：スケール（1、0）;
    可視性：隠された;
  }
  100％{
    不透明：1;
    変換：スケール（1、1）;
  }
}

/ * in in */
.anime.splat {animation-name：animate-splat;

@keyframes animate-splat {
  0％{
    不透明：0;
    変換：スケール（0、0）回転（20DEG）翻訳（0、-30px）;
    }
  70％{
    不透明：1;
    変換：スケール（1.1、1.1）回転（15DEG）;
  }
  85％{
    不透明：1;
    変換：スケール（1.1、1.1）回転（15DEG）翻訳（0、-10px）;
  }

  100％{
    不透明：1;
    変換：スケール（1、1）回転（0）翻訳（0、0）;
  }
}

/ *ロールイン */
.anime.roll {animation-name：animate-roll;

@KeyFrames Animate-Roll {
  0％{
    不透明：0;
    変換：スケール（0、0）回転（360DEG）;
  }
  100％{
    不透明：1;
    変換：スケール（1、1）回転（0DEG）;
  }
}

/ * flip in */
.animate.flip {
  Animation-Name：Animate-Flip;
  変換スタイル：preserve-3d;
  視点：1000px;
}

@KeyFramesAnimate-flip {
  0％{
    不透明：0;
    変換：Rotatex（-120Deg）スケール（0.9、0.9）;
  }
  100％{
    不透明：1;
    変換：Rotatex（0DEG）スケール（1、1）;
  }
}

/ *スピン */
.animate.spin {
  Animation-Name：Animate-Spin;
  変換スタイル：preserve-3d;
  視点：1000px;
}

@KeyFrames Animate-Spin {
  0％{
    不透明：0;
    変換：Rotatey（-120Deg）スケール（0.9、.9）;
  }
  100％{
    不透明：1;
    変換：Rotatey（0DEG）スケール（1、1）;
  }
}

/ *スライド */
.Animate.Slide {Animation-Name：Animate-Slide;

@KeyFrames Animate-Slide {
  0％{
    不透明：0;
    変換：翻訳（0、20px）;
  }
  100％{
    不透明：1;
    変換：翻訳（0、0）;
  }
}

/ *ドロップイン */
.animate.drop { 
  Animation-Name：Animate-Drop; 
  アニメーションタイミング機能：Cubic-Bezier（.77、.14、.91、1.25）;
}

@KeyFrames Animate-Drop {
0％{
  不透明：0;
  変換：翻訳（0、-300px）スケール（0.9、1.1）;
}
95％{
  不透明：1;
  変換：翻訳（0、0）スケール（0.9、1.1）;
}
96％{
  不透明：1;
  変換：翻訳（10px、0）スケール（1.2、0.9）;
}
97％{
  不透明：1;
  変換：翻訳（-10px、0）スケール（1.2、0.9）;
}
98％{
  不透明：1;
  変換：翻訳（5px、0）スケール（1.1、0.9）;
}
99％{
  不透明：1;
  変換：翻訳（-5px、0）スケール（1.1、0.9）;
}
100％{
  不透明：1;
  変換：翻訳（0、0）スケール（1、1）;
  }
}

/ *アニメーションの遅延 */
.delay-1 {
  アニメーション遅延：0.6s;
}
.delay-2 {
  アニメーション遅延：0.7s;
}
.delay-3 {
  アニメーション遅延：0.8s;
}
.delay-4 {
  アニメーション遅延：0.9秒;
}
.delay-5 {
  アニメーション遅延：1秒;
}
.delay-6 {
  アニメーション遅延：1.1秒;
}
.delay-7 {
  アニメーション遅延：1.2秒;
}
.delay-8 {
  アニメーション遅延：1.3秒;
}
.delay-9 {
  アニメーション遅延：1.4S;
}
.delay-10 {
  アニメーション遅延：1.5秒;
}
.delay-11 {
  アニメーション遅延：1.6S;
}
.delay-12 {
  アニメーション遅延：1.7秒;
}
.delay-13 {
  アニメーション遅延：1.8s;
}
.delay-14 {
  アニメーション遅延：1.9S;
}
.delay-15 {
  アニメーション遅延：2秒;
}

@media画面と（還元モーションを好む：redument）{
  .anime {
    アニメーション：なし！重要。
  }
}
ログイン後にコピー

以上がCSSのアニメーション化された入り口のための便利な小さなシステムの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

前の記事：ショー、Don＆＃039; t Tell 次の記事：目に見えないJavaScriptバックドア
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート