mozilla
Your Search Results

    @keyframes

    概要

    @keyframes は、アニメーション中に到達すべきポイントであるキーフレーム (通過点) を明示することで、CSS animation の流れの中間地点をページ作者が制御することを可能にします。これにより、ブラウザにすべてを自動的に扱わせる場合よりも、アニメーションの流れの中間地点をより明確に制御することができます。

    キーフレームを使うには、アニメーションとそのキーフレームを一致させるために、animation-name プロパティで指定したものと同じ名前がついた @keyframes 規則を作成します。それぞれの @keyframes 規則は、キーフレームセレクタのスタイルリストを含んでいます。またそれらは、キーフレームのスタイル情報が含まれているブロックと、アニメーションの途中でそのキーフレームの状態になるパーセント値で構成されています。

    キーフレームは任意の順番で並べることができます。これらは、その状態になるときを示すパーセント値の順番に従って制御されます。

    正当なキーフレームのリスト

    キーフレームのリストを正当なものにするために、少なくとも 0% (または from) および 100% (または to) の規則を含める必要があります。これは、アニメーションの始まりと終わりを示します。これら両方のタイミングを指定しない場合、キーフレームの宣言は不正であるとされてアニメーションには使用できません。

    キーフレーム規則にアニメーションができないプロパティを含めた場合、そのプロパティは無視されますが、他のアニメーションが可能なプロパティについてはアニメーションが実行されます。

    宣言の重複

    複数のキーフレームに同じ名前が付けられている場合、最後に宣言されたものが使用されます。@keyframes 規則は入れ子にしないため、アニメーションが複数の規則セットによるキーフレームをもとにして行われることはありません。

    アニメーションのタイミングの指定が重複している場合は、@keyframes 規則の中で、そのパーセント値である最後のキーフレームが使用されます。@keyframes 規則の中で、同じパーセント値を指定した複数のキーフレームが入れ子になることはありません。

    一部のキーフレームでプロパティが指定されていない場合

    一部のキーフレームでしか指定されていないプロパティは、補完されます (ただし、補完することができないプロパティは除きます。このようなプロパティは、アニメーションされません)。例えば:

    @keyframes identifier {
      0% { top: 0; left: 0; }
      30% { top: 50px; }
      68%, 72% { left: 50px; }
      100% { top: 100px; left: 100%; }
    }
    

    この例では、top プロパティは 0%、30%、100% のキーフレームでアニメーション指定されています。また、 left プロパティは 0%、70%、100% のキーフレームで指定されています。

    0% と 100% の両方のキーフレームで指定されているプロパティは、アニメーションされます。両方のキーフレームでは指定されていないプロパティは、アニメーション開始時の値がアニメーション中も維持されます。

    構文

    @keyframes <identifier> {
      [ [ from | to | <percentage> ] [, from | to | <percentage> ]* block ]*
    }
    

    <identifier>
    キーフレームのリストを識別する名前。これは CSS 構文規則で定義されている識別子に適合する必要があります。
    from
    アニメーションの始まりである 0% を示す。
    to
    アニメーションの終わりである 100% を示す。
    <割合>
    アニメーションの中で指定したキーフレームが発生する時間を示すパーセント値。

    例示

    CSS animations を参照してください。

    仕様書

    Specification Status Comment
    CSS Animations Level 3 草案  

    ブラウザの互換性

    機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
    基本サポート (有)-webkit 5.0 (5.0)-moz 10 12 -o 4.0-webkit
    機能 Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
    基本サポート ? ? ? ? ?

    参考情報

    ドキュメントのタグと貢献者

    Contributors to this page: yyss, ethertank
    最終更新者: ethertank,
    サイドバーを隠す