CSS を使用してホバートランジション アニメーション プロジェクトを完成させます (非常に簡単)

CSS は特別な効果を実現するために複雑である必要はありません。ここでは、ほんの数行のコードでありながら、Web アプリケーションに多くの機能を追加する非常に単純なトランジションの 3 つの例を示します。

#このチュートリアルで構築するコードは次のとおりです

プロジェクト設定

このプロジェクトでは、クラスボックスを持つ要素にトランジション効果を適用します。このボックス要素内には、テキスト コンテンツが垂直方向と水平方向の中央に配置されます。 HTML の構造は非常にシンプルです:

<div class=&#39;box&#39;>
  <p>TEXT</p>
</div>

CSS コードも同様にシンプルです。サンセリフ フォントを使用し、div 内の段落テキストが白であることを確認するには、次のコードを使用します:

body {
  color: white;
  font-family: Helvetica, Sans-Serif;
}

さらに、次の CSS 属性を box 要素に追加します。

.box {
  width:200px;                 /* Set the Width of box          */
  height:50px;                 /* Set the Height of box         */
  background:#424242;          /* Dark Grey Background color    */
  transition:all 0.25s ease;   /* Transition settings           */
  display: flex;               /* Use Flexbox on P              */
  align-items: center;         /* Center P                      */
  justify-content: center;     /* Center P                      */
  margin: 10px;                /* Apply a margin around our Box */
}

CSS のトランジション プロパティに精通している人もそうでない人も、ここでは 3 つのステップに分けて簡単に紹介します。最初のステップとして、変更されたすべてのプロパティにそれを適用する必要があります。次に、トランジション時間を 0.25 秒に設定します。最後にアニメーション機能を簡単に選択します。楽な演奏状態とは、開始と終了のプロセスが比較的遅く、中間の移行が速いことです。

holly high! 準備が整ったので、次のステップはトランジション エフェクトを追加することです。ここまでの div は次のようになっているはずです。

#1. フェード エフェクト

まず、フェード トランジションを追加します。新しい div 要素を作成し、それに fade という名前のクラスを追加します。

<div class=&#39;box fade&#39;>
  <p>FADE HERE</p>
</div>

次に行う必要があるのは、このフェード クラスのホバー ルールを指定することです。これを実現するには、CSS 疑似クラス selector:hover を使用する必要があります。この疑似セレクターはすべての要素に対して有効であり、要素の上にマウスを置くと CSS 宣言がアクティブになります。これに基づいて、:hover セレクターを使用して div の透明度を 0.5 に変更します:

.fade:hover {
  opacity: 0.5;
}

Simple。上記の CSS ステートメントは、div のホバー効果を指定します。現在の様子は次のとおりです。トランジション スタイルが表示される理由は、最初に box という名前のクラスで宣言 transition:all 0.25s easy; を使用したためです。以下を見てください、かなり良いフェード効果です:

2. 色を見てみましょう

色を指定してくださいトランジション 実際、これはフェージングトランジションのプロセスに似ています。まず、div 要素を作成し、それに color というクラスを追加します。

<div class=&#39;box color&#39;>
  <p>COLOR HERE</p>
</div>

同様に、これを達成するために :hover セレクターを使用する必要がありますが、今回は透明度ではなく背景色を変更します。

.color:hover {
  background: #FF5722;
}

以下は実際のエフェクト :

3. 一緒にスイング

次に、スイングエフェクトを実現します。このエフェクトの実装は、前の 2 つの例よりも若干複雑です。この例では、@keyframes を使用します。

@keyframes - CSS アニメーション シーケンスの中間ステップを制御する魔法を提供します。

最初のことは同じです。もう聞き飽きているでしょう。div 要素を作成し、wiggle というクラスをそれに追加します。

<div class=&#39;box wiggle&#39;>
  <p>WIGGLE WIGGLE</p>
</div>

次に、しなければならないことは次のとおりです。 @ キーフレームを使用してアニメーションを作成します。まずアニメーションに名前を付けて、wiggle と名付けましょう。そして、次のコードにジッター エフェクトの実装を追加します。

@keyframes wiggle {
  20%  { transform: translateX(4px);  }
  40%  { transform: translateX(-4px); }
  60%  { transform: translateX(2px);  }
  80%  { transform: translateX(-1px); }
  100% { transform: translateX(0);    }
}

上記のコードからわかるように、@keyframes を使用すると、アニメーションを単一のステップに分割し、各ステップで何が起こるかを正確に定義できます。ステップ。アニメーションの進行状況をパーセンテージで指定します:

20% - div は、初期位置に対して 4 ピクセル右に移動します。

40%——div は、初期位置に対して 4 ピクセル左に移動します。

60%——div は、初期位置に対して 2 ピクセル右に移動されます。

80%——div は、初期位置に対して 1 ピクセル左に移動します。

100%——div は元の位置に復元されます。

これで、:hover セレクターを使用して、小刻みに動くアニメーションを表示できます。

.wiggle:hover {
  animation: wiggle 1s ease;
  animation-iteration-count: 1;
}

アニメーションを小刻みに動かすように設定します。同時に、アニメーションを 1 秒間継続し、イージング アニメーション効果を使用する必要があります。

最後に、マウス ポインターがホバーするたびにトリガーするアニメーションを指定します。

下の図は、最終的なアニメーション効果です:

以上がCSS を使用してホバートランジション アニメーション プロジェクトを完成させます (非常に簡単)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。