ホーム HTML CSS XML JAVASCRIPT   PHP SQL MORE...   リファレンス 事例集    

CSS3 transition プロパティ

CSS3 Reference 完全な CSS3 リファレンス

例

Hover over a div element to gradually change the width form 100px to 300px:

div
{
width:100px;
transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari and Chrome */
-o-transition: width 2s; /* Opera */
}
div:hover {width:300px;}

Try it yourself »

ブラウザ・サポート

Internet Explorer Firefox Opera Google Chrome Safari

transition property is not supported in any browsers.

Firefox 4 supports an alternative, the -moz-transition property.

Safari and Chrome support an alternative, the -webkit-transition property.

Opera supports an alternative, the -o-transition property.

定義と用法

transition property is a shorthand property for the four transition properties:

transition-property, transition-duration, transition-timing-function, and transition-delay.

注: Always specify the transition-duration property, otherwise the duration is 0, and the transition will have no effect.

デフォルト値: all 0 ease 0
継承: no
バージョン: CSS3
JavaScript構文: object.style.transition="width 2s"

構文

transition: property duration timing-function delay;

値 説明
transition-property Specifies the name of the CSS property the transition effect is for
transition-duration Specifies how many seconds or milliseconds the transition effect takes to complete
transition-timing-function Specifies the speed curve of the transition effect
transition-delay Defines when the transition effect will start

CSS3 Reference 完全な CSS3 リファレンス