CSS アニメーション ガイド: バウンス効果を作成する方法を段階的に説明します。

CSS アニメーション ガイド: バウンス効果を作成する方法を段階的に説明します。具体的なコード例が必要です。

はじめに:

現代の Web 開発では、アニメーション効果が使用されます。ユーザーを向上させるための重要な要素となっています。体験し、注目を集めるための重要な手段の 1 つです。 CSS アニメーションは軽量のアニメーション テクノロジーであり、簡単なコードでさまざまなクールな効果を実現できます。この記事では、詳細な CSS アニメーション制作ガイドを提供します。ステップバイステップの指導方法を通じて、バウンス効果のあるアニメーションを作成できるようになり、CSS アニメーション テクノロジをより深く理解し、使用できるようになります。

準備作業:

アニメーションの作成を開始する前に、基本的な作業環境を準備する必要があります。まず、Sublime Text、Visual Studio Code などのテキスト エディターが必要です。次に、アニメーション効果をプレビューおよびデバッグするには、最新のブラウザが必要です。Google Chrome または Mozilla Firefox の使用をお勧めします。最後に、HTML と CSS の基本的な知識が必要です。この知識をすでに知っている場合は、次にエディタを開いてコードを記述する準備をする必要があります。

制作プロセス:

HTML 構造の作成

ドキュメントに div 要素を追加し、クラスに「box」という名前を付けます。この div はアニメーション効果のキャリアになります。

2. <div class="box"></div>

CSS スタイルの記述

スタイルを「box」要素に追加し、幅、高さ、背景色などの基本属性を設定し、配置します。画面の中央。

3. .box {
     width: 200px;
     height: 200px;
     background-color: #ff0000;
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
   }

アニメーション キーフレームの追加

CSS では、@keyframes ルールを使用してアニメーションのキーフレームを定義します。バウンス効果を実現するには、開始フレーム、中間フレーム、終了フレームという 3 つのキー フレームを定義する必要があります。

4. @keyframes bounce {
     0% {
       transform: translateY(0);
     }
     50% {
       transform: translateY(-200px);
     }
     100% {
       transform: translateY(0);
     }
   }

アニメーション効果を適用する

「box」要素にアニメーション属性を追加し、アニメーション名、継続時間、遅延時間、アニメーションの再生回数を設定します。

.box {
  animation-name: bounce;
  animation-duration: 1s;
  animation-delay: 0.5s;
  animation-iteration-count: infinite;
}

これでアニメーションが完成しました。ファイルを保存し、ブラウザで HTML ファイルを開くと、バウンス効果のある赤い四角形のボックスが表示されます。

概要: ###この記事の学習を通じて、CSS アニメーションの基本原理を理解し、具体的な例を通じて、跳ねる特殊効果アニメーションを段階的に作成しました。これらの基本をマスターしたら、さらに研究して、回転、グラデーション、スケーリングなどのより複雑なアニメーション効果を試すことができます。この記事を通じて、CSS アニメーションについての理解を深め、実際のプロジェクトで CSS アニメーションを使用してユーザー エクスペリエンスを向上できるようになることを願っています。 ###

以上がCSS アニメーション ガイド: バウンス効果を作成する方法を段階的に説明します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。