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

CSSのanimation-fill-mode: forwardsで最後のキーフレームのスタイルを保持する方法

CSSアニメーションが終了した後も、最後のキーフレーム（to）で指定されたスタイル値を要素に保持させたい場合は、animation-fill-modeプロパティに forwards を指定します。

この設定を行わない場合、アニメーション終了後に要素は元のスタイルへ戻ってしまいます。forwards を指定することで、アニメーションの最終状態がそのまま維持され、自然な演出を実現できます。

サンプルコード

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

コードのポイント

  • animation-name：適用するキーフレーム（@keyframes myanim）の名前を指定します。
  • animation-duration：アニメーションの再生時間を2秒に設定しています。
  • animation-fill-mode: forwards：アニメーション終了後も最後のキーフレームのスタイルを保持します。
  • @keyframes：開始時（from）は左位置0px・緑色、終了時（to）は左位置200px・青色へ変化します。

この例では、赤いdiv要素が2秒かけて右へ200px移動しながら、緑色から青色へと変化します。そしてアニメーション終了後も「左200px・青色」の状態が保持され続けます。もし animation-fill-mode: forwards を削除すると、アニメーション終了直後に要素は元の赤色・初期位置へ戻るため、実際に試して違いを確認してみてください。

  1. CSSの:only-childセレクターを使って、親の唯一の子であるすべての<p>要素にスタイルを適用する方法

    CSSの:only-childセレクターを使用すると、親要素内で唯一の子要素として存在する<p>要素だけを選択し、スタイルを適用することができます。兄弟要素が1つでも存在する場合、その要素は対象外となるため、特定の構造を持つHTMLに対してピンポイントでデザインを指定したいときに非常に便利です。 :only-childセレクターの基本構文 p:only-child { /* スタイルの指定 */ } 実装例 以下のコードでは、2つの<div>要素の中に<p>タグが配置されています。最初の<div>には<p>要素が1つだけ含まれてい

  2. CSSでhr要素（水平線）のスタイルを設定する方法をわかりやすく解説

    CSSを使ってhr要素（水平線）のスタイルを設定するには、borderプロパティを活用します。hr要素はデフォルトではシンプルな1本の線として表示されますが、border-topやborder-radiusなどを組み合わせることで、実線・破線・二重線・点線・角丸など、さまざまなデザインに自由にカスタマイズできます。以下に、代表的な5種類の水平線スタイルを実装したサンプルコードを紹介します。サンプルコード<!DOCTYPE html> <html> <meta name="viewport" content="width=device-