高度な CSS アニメーション プロパティ: キーフレームとアニメーション

高度な CSS アニメーション プロパティ: キーフレームとアニメーション

CSS アニメーションは Web デザインの重要な部分です。連続画像を表示することで流れるような効果を作成できます。ページの視覚的な魅力。 CSS では、さまざまなアニメーション プロパティを使用してさまざまな効果を作成できます。この記事では、キーフレームとアニメーションという 2 つの主要なアニメーション プロパティに焦点を当て、具体的なコード例を示します。

1. キーフレーム
キーフレームは、アニメーション シーケンスを定義するキーフレーム ルールです。各ルールは、アニメーション サイクルの特定の時点での要素のスタイルを指定できます。簡単なキーフレームの例を次に示します。

@keyframes fade-in {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

上の例では、@keyframes キーワードを使用して、フェードインと呼ばれるアニメーションを定義します。このアニメーションは、透明度レベル 0 (0%) から透明度レベル 1 (100%) に移行します。任意のパーセント値を使用してキーフレーム ルールを定義できます。

2. アニメーション
アニメーション属性は省略表現の属性で、@keyframes ルールで指定された一連のアニメーション属性を同時に設定するために使用されます。以下は、animation 属性の使用例です。

.element {
  animation-name: fade-in;
  animation-duration: 3s;
  animation-delay: 1s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
}

上の例では、animation-name 属性を使用して適用するアニメーションの名前を指定し、animation-duration 属性を使用して適用するアニメーションの名前を指定します。アニメーションの継続時間 (3 秒)、アニメーションの遅延時間 (1 秒) を指定するためにanimation-delay 属性が使用され、要素の状態がその状態を維持することを指定するためにanimation-fill-mode 属性が使用されます。アニメーション終了後の最後のキーフレームのアニメーション タイム カーブを指定するために、animation-timing-function 属性が使用されます。

3. キーフレームとアニメーションの組み合わせ使用
キーフレームとアニメーション プロパティを組み合わせて使用​​すると、より複雑なアニメーション効果を作成できます。キーフレームとアニメーション属性を一緒に使用する例を次に示します:

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

.element {
  animation-name: pulse;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

上の例では、さまざまなキーフレーム ルールを通じて要素にズームインおよびズームアウトを適用する、pulse と呼ばれるアニメーションを定義しました。 anime-iteration-count プロパティを使用して、アニメーションが無限にループするように設定します。

概要:
キーフレームとアニメーションは、CSS アニメーションにおける 2 つの非常に重要なプロパティです。キーフレームは、アニメーション シーケンスのキーフレーム ルールを定義するために使用されます。これにより、アニメーション サイクルの特定の時点での要素のスタイルを指定できます。アニメーション プロパティは、@keyframes ルールで指定された一連のアニメーション プロパティを同時に設定するために使用されます。これら 2 つのプロパティを組み合わせると、さまざまな複雑なアニメーション効果を作成できます。

この記事のコード例が、読者の CSS アニメーション プロパティのキーフレームとアニメーションの理解と使用に役立つことを願っています。もちろん、これはアニメーションの基礎にすぎず、さらに多くの強力な CSS アニメーション テクニックが私たちの探索を待っています。一緒に素晴らしいWebアニメーションを作成しましょう！

以上が高度な CSS アニメーション プロパティ: キーフレームとアニメーションの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。