「基礎から応用まで」 コースの講義 13 へようこそ!この投稿では、CSS アニメーション について説明します。これは、時間の経過とともにアニメーション化することで Web 要素に生命を吹き込む強力な方法です。 CSS アニメーションを使用すると、ユーザー エクスペリエンスとエンゲージメントを向上させる、スムーズでダイナミックな効果を作成できます。
CSS アニメーションを使用すると、要素は定義された期間にわたって異なるスタイル間を遷移できます。 2 つの主要なプロパティを使用してアニメーションの動作を制御できます:
@keyframes ルールは、アニメーション中のさまざまな時点で要素が持つ必要があるスタイルを指定します。さまざまなパーセンテージでキーフレームを定義します (0% が開始、100% が終了)。
@keyframes changeColor {
0% {
background-color: red;
}
100% {
background-color: blue;
}
}
この例では:
要素にアニメーションを適用するには、アニメーション プロパティを使用します。このプロパティにはいくつかのキー値が必要です:
遅延: アニメーションを開始するまでの待機時間。
例: 要素にアニメーションを適用します。
.box {
animation: changeColor 2s ease-in-out infinite;
}
この場合:
タイミング関数は、時間の経過とともにアニメーションがどのように進行するかを制御します。一般的なタイミング関数には次のものがあります。
イーズアウト: アニメーションは速く始まり、遅くなります。
例: 別のタイミング関数を適用します。
.box {
animation: changeColor 3s linear;
}
こちら:
animation-iteration-count プロパティを使用して、アニメーションを繰り返す回数を制御できます。また、アニメーション遅延を使用してアニメーションの開始を遅らせることもできます。
.box {
animation: changeColor 2s ease-in 3;
animation-delay: 1s;
}
この場合:
animation-fill-mode プロパティは、アニメーションの前後で要素がどのように見えるかを定義します。一般的な値は次のとおりです:
backwards: 要素はアニメーションが開始する前の初期状態になります。
例: アニメーション後の最終状態を保持します。
.box {
animation: changeColor 2s ease forwards;
}
こちら:
コンマで区切ることにより、要素に複数のアニメーションを適用できます。
@keyframes moveBox {
0% {
transform: translateX(0);
}
100% {
transform: translateX(100px);
}
}
.box {
animation: changeColor 2s ease, moveBox 2s ease-in-out;
}
この場合:
最新のブラウザは CSS アニメーションをサポートしていますが、古いバージョンのブラウザにはベンダー プレフィックスを追加することをお勧めします。
.box {
-webkit-animation: changeColor 2s ease;
-moz-animation: changeColor 2s ease;
animation: changeColor 2s ease;
}
This ensures compatibility across different browsers.
Next Up: In the next lecture, we’ll explore CSS Transitions, which allow you to animate changes in CSS properties smoothly. You’ll learn how to create engaging hover effects and other interactions that enhance user experience.
Ridoy Hasan
以上是CSS 动画 – 让元素栩栩如生的详细内容。更多信息请关注PHP中文网其他相关文章！
