transition リダイレクト 1

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

概要

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

関連情報

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

 このページの貢献者: ethertank
 最終更新者: ethertank,