CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのanimation-fill-mode: bothでアニメーションスタイルを両方向に適用する方法

CSSでアニメーションの開始前と終了後にもスタイルを適用したい場合は、animation-fill-modeプロパティにbothを指定します。この値を使うことで、forwards(前方)とbackwards(後方)両方の効果が得られ、アニメーションの前後でもキーフレームで定義したスタイルが維持されます。

animation-fill-mode: bothとは

bothを指定すると、以下のような動作になります。

  • 遅延時間中(animation-delay):最初のキーフレーム(from)のスタイルが要素に適用されます。
  • アニメーション終了後:最後のキーフレーム(to)のスタイルがそのまま保持されます。

つまり、アニメーションの実行前から実行後まで、一貫してスタイルをコントロールできる便利な値です。

コード例

次の例では、赤いdiv要素が左から右へ移動しながら色が変化するアニメーションを設定しています。animation-fill-mode: both;により、アニメーション終了後も最終状態(青色・右側の位置)が維持されます。

<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 150px;
height: 200px;
position: relative;
background: red;
animation-name: myanim;
animation-duration: 2s;
animation-fill-mode: both;
}
@keyframes myanim {
from {left: 0px; background-color: green;}
to {left: 200px; background-color: blue;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>

サンプルコードの解説

  • animation-name: myanim; … 適用するキーフレーム(@keyframes myanim)を指定します。
  • animation-duration: 2s; … アニメーションの完了までの時間を2秒に設定します。
  • animation-fill-mode: both; … アニメーション開始前は緑色(green)、終了後は青色(blue)のスタイルが適用されたままになります。
  • @keyframes myanim … 開始時(from)は左端・緑色、終了時(to)は右へ200px移動した位置・青色を定義しています。

このようにbothを活用すると、アニメーションの開始前に一瞬初期スタイルがちらつくのを防ぎ、終了後に元のスタイルへ戻ってしまう問題も回避できます。モーダル表示やフェードイン演出など、滑らかなUIアニメーションを実装する際にぜひ活用してください。

  1. CSSのanimation-timing-functionでアニメーションの速度曲線を指定する方法

    CSSでアニメーションの速度曲線（イージング）を指定するには、animation-timing-functionプロパティを使用します。このプロパティにより、アニメーションが開始から終了までどのようなペースで進行するかを細かく制御できます。主な速度曲線の値ease … 初期値。ゆっくりと始まり、中盤で加速し、最後はゆっくりと終わります。ease-in … ゆっくりと始まり、徐々に速くなります。ease-out … 速く始まり、徐々に遅くなります。ease-in-out … ゆっくり始めて加速し、最後にゆっくりと終わります。linear … 始めから終わりまで一定の速度で進みます。実装例次のコー

  2. CSSのbackground-colorプロパティでアニメーションを実装する方法

    CSSでbackground-colorプロパティをアニメーションさせる方法CSSでは、@keyframesルールとanimationプロパティを組み合わせることで、background-color（背景色）プロパティにアニメーションを適用できます。背景色はアニメーション可能なプロパティの一つであり、ある色から別の色へと滑らかに変化させることが可能です。以下の例では、黄色いdiv要素が3秒間かけて暗赤色（maroon）へと変化するアニメーションを無限に繰り返します。コード例<!DOCTYPE html> <html>    <head>