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

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

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

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

制作プロセス:

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

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

   ログイン後にコピー

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