webmas.jp

transition は要素の状態変化を指定する、transition-property、 transition-duration、 transition-timing-function、 transition-delay の一括指定プロパティです。

値

transition-property, transition-duration, transition-timing-function, transition-delay の各値

初期値

各プロパティの初期値

• transition-delay: 0s
• transition-duration: 0s
• transition-property: all
• transition-timing-function: ease

対象

すべての要素

継承

しない

CSS レベル

CSS 3～

サンプル

複数のプロパティの値をカンマで区切って指定します。

transition: 1, 2, 3, 4;

1. 変化させるプロパティ名
2. 変化させる時間
3. 変化の進行度
4. 変化を開始するまでの時間

div {
	transition: background 0.5s linear;
}

div:hover {
	background: #cccccc;
}

指定した内容

1. 変化させるプロパティ名：背景色
2. 変化させる時間：0.5秒
3. 変化の進行度：直線的に変化
4. 変化の開始タイミング：0秒（指定なしのため初期値）

プレビュー

テキスト上にマウスカーソルを乗せると背景色が変化します。