mozilla
Your Search Results

    transition

    これは実験段階の機能です。
    この機能は複数のブラウザで開発中の状態にあります。各ブラウザで用いるために、適切なベンダー接頭辞が必要な場合があります。互換性テーブルをチェックしてください。また、実験段階の機能の構文と挙動は、仕様変更に伴い各ブラウザの将来のバージョンで変更になる可能性があることに注意してください。

    概要

    transition CSS プロパティは、transition-propertytransition-durationtransition-timing-functiontransition-delay の各プロパティの値を設定するショートハンドプロパティです。要素の 2 つの状態間のトランジションを定義できます。各状態の定義は :hover:active のような擬似クラスを使うか、JavaScript を使って動的に行います。

    • 初期値 以下の各ロングハンドプロパティの初期値が使用されます:
      • transition-delay: 0s
      • transition-duration: 0s
      • transition-property: all
      • transition-timing-function: ease
    • 適用対象 全要素、 ::before / ::after 疑似要素
    • 継承 継承しない
    • メディア interactive
    • 計算値 指定値
    • アニメーションの可否 不可
    • 正規順序 order of appearance in the formal grammar of the values

    構文

    transition:  [ none | <single-transition-property> ] || <time> || <timing-function> || <time>
    

    指定値の順番が重要であることに注意してください。第 1 パラメータは <time> であると解釈し transition-duration に割り当てます。第 2 パラメータは <time> と解釈し transition-delay に割り当てます。

    プロパティの値の数が異なる場合の扱い方について、詳しくは プロパティの値の数が異なる場合 をご覧ください。要約すると、実際に動かすプロパティの数を超える transition の指定は無視されます。

    CSS transitions の記事に、トランジションの例がいくつかあります。

    仕様書

    仕様書 策定状況 コメント
    CSS Transitions 草案  

    ブラウザ実装状況

    機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari
    基本サポート

    1.0 -webkit
    26.0

    4.0 (2.0) -moz
    16.0 (16.0)

    10.0

    11.6 -o
    12.10 #

    3.0 -webkit
    機能 Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
    基本サポート 2.1 -webkit 4.0 (2.0)
    -moz
    16.0 (16.0)
    ?

    10.0 -o
    12.10 #

    3.2 -webkit

    関連情報

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

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