CSS - tansition-property

概要

属性名	tansition-property
値	none \| <property>#
初期値	all
適用可能要素	すべての要素 (::before, ::after を含む)
継承	継承しない
メディア	visual
アニメーション	不可

サポート (説明)

CSS	IE/Edge	Firefox	Chrome	Opera	Safari
CSS3	10	4(-moz) 16	1.0(-webkit) 26	11.5(-o) 12.1	3.1(-webkit) 6.1

説明

トランジションの対象となる属性名を指定します。トランジションに関する詳細は transition を参照してください。

値	説明
none	どの属性も対象としません。
<property>	対象とする属性名を指定します。all を指定するとすべての属性が対象となります。

使用例

下記の例は、.test クラスの要素にマウスを乗せた(:hover)際、0.1秒の遅延時間の後、横幅(width)を 0.2秒かけてリニア(linear)に 300px に広げています。

CSS

.test {
  width: 100px;
  height: 30px;
  background: #f66;
  transition-property: width;
  transition-duration: 0.2s;
  transition-timing-function: linear;
  transition-delay: 0.1s;
}
.test:hover {
  width: 300px;
}

HTML

<div class="test"></div>

表示

リンク

初版：2016年1月3日、最終更新：2016年1月3日

https://www.tohoho-web.com/css/prop/transition-property.htm

CSS - tansition-property

概要

サポート (説明)

説明

使用例

関連項目

リンク