CSS3 Pre-Reference



transition-property

遷移対象のプロパティ

試す





コード

#containe p {
    transition-property: all;
    -moz-transition-property: all;
    -webkit-transition-property: all;
    -o-transition-property: all;
}

サンプル

※サポートされていない単位(vw、vhなど)では動作しません。

その後(けむり)したから火がある。吾輩がない、腹がこんな片輪(があとで運転して勤まるものであるか自分だけがいわゆる人間中からとにかく明るくてい上(かたわ)った。

コメントする


対応ブラウザ

Firefox
4.0~
Chrome/Safari
3.1~
Opera
10.50~
InternetExplorer
まだ

パラメータ

none | all | [ <プロパティ名> ] [ ‘,’ <プロパティ名> ]*
初期値 all
適用 すべての要素、::beforeと::afterを含む
継承 しない
レベル 3
%の解釈 -
適用メディア Interactive
参考文献 CSS Transitions Module Level 3#2.1. The ‘transition-property’ Property

解説

遷移するプロパティを指定します。

値は”none”、”all”またはプロパティ名をカンマ区切りで列挙します。

transition-duration”で遷移時間を指定しないと、効果が分かりません。

ちなみに遷移するプロパティは、以下のとおりです。

  • background-color
  • background-image
  • background-position
  • border-bottom-color
  • border-bottom-width
  • border-color
  • border-left-color
  • border-left-width
  • border-right-color
  • border-right-width
  • border-spacing
  • border-top-color
  • border-top-width
  • border-width
  • bottom
  • color
  • crop
  • font-size
  • font-weight
  • grid-*
  • height
  • left
  • letter-spacing
  • line-height
  • margin-bottom
  • margin-left
  • margin-right
  • margin-top
  • max-height
  • max-width
  • min-height
  • min-width
  • opacity
  • outline-color
  • outline-offset
  • outline-width
  • padding-bottom
  • padding-left
  • padding-right
  • padding-top
  • right
  • text-indent
  • text-shadow
  • top
  • vertical-align
  • visibility
  • width
  • word-spacing
  • z-index
  • zoom

トラックバック

投稿されたコメント