CSS3 の新機能の概要: CSS3 アニメーション効果を適用する方法

CSS3 の新機能の概要: CSS3 アニメーション効果を適用する方法

はじめに:
インターネットの発展に伴い、CSS3 は徐々に CSS2 に取って代わりました。最も人気のあるフロントエンド開発ツールで、一般的に使用されるスタイル言語です。 CSS3 は多くの新機能を提供しますが、その中で最も人気のある機能はアニメーション効果です。 CSS3 アニメーションを使用すると、Web ページに素晴らしいインタラクティブな効果を追加し、ユーザー エクスペリエンスを向上させることができます。この記事では、CSS3 の一般的に使用されるアニメーション機能をいくつか紹介し、関連するコード例を示します。

1. トランジション アニメーション

トランジション アニメーションは、CSS3 で最もシンプルで最も一般的に使用されるアニメーション効果です。要素の遷移属性を設定すると、色、サイズ、位置の変更など、要素をある状態から別の状態に一定時間内でスムーズに遷移させることができます。

これは、マウスをホバーしたときにボタンの色が別の色に変化する例を示しています:

<button class="transition-btn">按钮</button>

.transition-btn {
  color: white;
  background-color: blue;
  padding: 10px;
  border: none;
  transition: background-color 0.5s;
}

.transition-btn:hover {
  background-color: red;
}

上の例では、マウスをボタンの上にホバーすると、背景が色は青から赤にスムーズに移行し、移行時間は 0.5 秒です。

2. キーフレーム アニメーション

キーフレーム アニメーションは、CSS3 の比較的高度なアニメーション効果です。キーフレーム アニメーションでは、さまざまな時点での要素の属性値を定義できます。より複雑なアニメーション効果。キーフレーム アニメーションには通常、@keyframes ルールとアニメーション プロパティが含まれます。

次は、画像が左から右に移動するアニメーション効果を示す例です:

<img  class="keyframe-img lazy"  src="/static/imghw/default1.png"  data-src="image.jpg"  alt="CSS3 の新機能の概要: CSS3 アニメーション効果を適用する方法" >

.keyframe-img {
  position: relative;
  animation: slide 3s linear infinite;
}

@keyframes slide {
  0% { left: 0; }
  100% { left: 200px; }
}

この例では、画像は左から右にスムーズに移動し、最後に右に行ったら左端に戻ります。アニメーションの合計時間は 3 秒で、線形変化速度を使用し、無限ループで再生されます。

3. 変形アニメーション

変形アニメーションは、CSS3 の変形属性 (transform) を使用して、回転、拡大縮小、移動などの要素の変形効果を実現します。さまざまな変形プロパティと値を設定することで、さまざまな独自のアニメーション効果を作成できます。

次は、ブロックの回転の効果を示す例です:

<div class="transform-box"></div>

.transform-box {
  width: 100px;
  height: 100px;
  background-color: green;
  transform-origin: center center; /* 变形基点为中心 */
  animation: rotate 5s linear infinite;
}

@keyframes rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

上の例では、ブロックは中心点の周りを 1 秒あたり 1 回転の速度で回転します。アニメーションの合計時間は 5 秒で、線形変化速度を使用し、無限ループで再生されます。

概要:
CSS3 のアニメーション機能では、さまざまなアニメーション効果が提供されており、トランジション アニメーション、キーフレーム アニメーション、変形アニメーションを使用することで、フロントエンド開発者は Web ページに鮮やかで魅力的なインタラクティブな効果を追加できます。上記の例は CSS3 アニメーションの氷山の一角にすぎませんが、この記事での紹介が読者に、よりクールなアニメーション効果を作成するためのインスピレーションを提供できれば幸いです。オンラインの世界で一緒に無限の想像力と創造性を創造しましょう!

以上がCSS3 の新機能の概要: CSS3 アニメーション効果を適用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。