CSS遷移プロパティ

<div>要素にカーソルを合わせると、幅が100pxから300pxに徐々に変更されます。

div {
  width: 100px;
  transition: width 2s;
}

div:hover {
  width: 300px;
}

以下の「自分で試してみてください」の例をもっと見てください。

定義と使用法

プロパティは、次のtransition略記プロパティです。

注：transition-durationプロパティは常に指定してください。指定しない場合、durationは0であり、遷移は効果がありません。

デフォルト値：	すべての0は0を緩和します
遺伝性の：	いいえ
アニメート可能：	番号。アニメート可能について読む
バージョン：	CSS3
JavaScript構文：	object .style.transition = "all 2s"

表の数字は、プロパティを完全にサポートする最初のブラウザバージョンを示しています。

数字の後に-webkit-、-moz-、または-o-が続く場合は、プレフィックスを使用して機能した最初のバージョンを指定します。

Property
transition	26.0 4.0 -webkit-	10.0	16.0 4.0 -moz-	6.1 3.1 -webkit-	12.1 10.5 -o-

transition: property duration timing-function delay|initial|inherit;

Value	Description
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
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

<input type = "text">にフォーカスが移ったら、幅を100pxから250pxに徐々に変更します。

input[type=text] {
width: 100px;
transition: width .35s ease-in-out;
}

input[type=text]:focus {
width: 250px;
}