アニメーション名

3420 ワード
learncss cssa テキストリンク
CSSアニメーション名プロパティは、@ KeyFrameアニメーションの1つ以上の名前を指定するために使用されます.任意のアニメーションプロパティに対して複数のコンマ区切り値が指定されている場合、アニメーション名で定義されているアニメーションには、異なる名前が付けられます.
これはCSS 3のプロパティの一つです.別のアニメーションのプロパティは、アニメーションを制御することができます.
  • CSSアニメーション名プロパティは、次の値を受け入れます.
  • なし
  • キーフラメ
  • 初期
  • 相続する

    • アニメーション名プロパティーの特徴：


    △初期値
    ○は全ての要素に適用される.また、::before and ::after 擬似要素
    (承子)
    女アニマ
    CKバージョンCSS 3
    JavaScriptの構文object.style.animationName = "element"; |

    文法


    
animation-name: keyframename | none | initial | inherit;

    値


    値
    説明
    なし
    これはデフォルト値であり、アニメーションがないことを指定します.
    キーフラメ
    アニメーションの名前を指定します.
    初期
    この値を指定すると、プロパティは既定のval - ueを使用します.
    相続する
    親プロセスの要素からプロパティを継承します.

    アニメーション名プロパティーの例


    次のコードでは、アニメーションの名前を「色」として設定します.
    
<!DOCTYPE html>
<html>
  <head>
    <style>
      div {

        padding: 50px;

        animation: element 4s infinite;

      }
      @keyframes element {
        0% {

          background-color: #BA55D3;

        }
        50% {

          background-color: #8A2BE2;

        }
        100% {

          background-color: #9400D3;

        }
      }
    </style>
  </head>
  <body>

    <h2>Animation-name example</h2>

    <div>The name of the animation is set as "colors".</div>

  </body>
</html>

    結果:


    上記のコードを実行した後、次の画像に示すような結果が得られます.
    アニメーション名プロパティーの結果

    ブラウザサポート:


    ブラウザサポート
    関連記事
  • CSS animation Property
  • CSS animation-direction property
  • animation-duration property
  • CSS animation-iteration-count property
  • CSS all Property

    • よくある質問


    アニメーション名プロパティの使用方法を説明します.
    CSSアニメーション名プロパティは、@ KeyFrameアニメーションの1つ以上の名前を指定するために使用されます.
    アニメーション名プロパティの既定値は?
    アニメーション名プロパティの既定値は“None”です.
    アニメーション名プロパティの構文を定義しますか?
    アニメーション名:Keyframeameはなし.
    アニメーションプロパティに複数の値を与えることは可能ですか?
    はい、任意のアニメーションプロパティに対して複数のコンマ区切り値が指定されているので、アニメーション名で定義されているアニメーションには異なった値が付けられます.
    郵便CSS animation-name property 最初に現れたShare Point Anchor .
    Hanamiで動かすネクストエンジンAPIエクスプローラー
    Ruby on Rails での best_in_place 事始め