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

アニメーションが再生されていないときに要素のCSSスタイルを設定する方法

animation-fill-modeプロパティとは

CSSのanimation-fill-modeプロパティを使うと、アニメーションが再生されていない期間(再生開始前や終了後)における要素のスタイルを指定できます。アニメーションの前後で見た目が急に切り替わってしまうのを防ぎたい場合に特に便利です。

指定できる主な値

  • none(既定値)：アニメーション適用外の時間帯には、通常のスタイルがそのまま使用されます。
  • forwards:アニメーション終了後も、最後のキーフレームのスタイルが維持されます。
  • backwards:アニメーション開始前(遅延時間中など)に、最初のキーフレームのスタイルが適用されます。
  • both:forwardsとbackwardsの両方の効果が適用されます。

サンプルコード

以下の例では、animation-fill-mode: backwards; を指定することで、アニメーションが始まる前の待機時間中にも、最初のキーフレーム(from)で定義されたスタイルが要素に適用されます。

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

コードのポイント

  • @keyframes myanim で、左端から200px移動しながら色が緑から青へ変化するアニメーションを定義しています。
  • animation-duration: 2s; により、アニメーションは2秒かけて実行されます。
  • animation-fill-mode: backwards; の指定により、遅延がある場合でも開始前の状態が最初のキーフレームのスタイル(緑色・左端)になります。

なお、これらのアニメーション関連プロパティは、animation ショートハンドプロパティを使って一括指定することも可能です。

  1. CSSで下境界線（border-bottom）のスタイルを設定する方法

    要素の下側に表示される境界線（ボーダー）のデザインを変更したい場合は、CSSの border-bottom-style プロパティを使用します。このプロパティでは、点線や二重線、破線、実線など、さまざまなスタイルの下境界線を簡単に設定できます。 指定できる主な値 border-bottom-style プロパティに指定できる代表的な値は以下のとおりです。 dotted … 点線 dashed … 破線 solid … 実線 double … 二重線 inset … 凹んで見える立体風の線 outset … 浮き上がって見える立体風の線 サンプルコード 次のコードを実行すると、各クラスごとに

  2. CSSのtext-decoration-styleプロパティでテキスト装飾のスタイルを設定する方法

    text-decoration-styleプロパティとは テキスト装飾の線のスタイルを設定するには、CSSの text-decoration-style プロパティを使用します。このプロパティを使うことで、取り消し線・下線・上線などの装飾線を、実線や二重線、点線、破線、波線など好みのスタイルに変更できます。 構文と使用できる値 text-decoration-style: solid|double|dotted|dashed|wavy|initial|inherit; solid … 実線（初期値） double … 二重線 dotted … 点線 dashed … 破線 wavy … 波