Visibilityプロパティのアニメーション時の振る舞い

visibilityプロパティはdisplayプロパティと違い、指定する値が数値などではないにもかかわらずアニメーション可能なプロパティとして扱われます。

実際にはプロパティの「アニメーション」というよりは、プロパティの「切り替え」といった挙動ですが以下のルールに基づいて、アニメーションを行っています。

##プロパティの置き換えルール

CSS Transitions

visibility: if one of the values is ‘visible’, interpolated as a discrete step where values of the timing function between 0 and 1 map to ‘visible’ and other values of the timing function (which occur only at the start/end of the transition or as a result of ‘cubic-bezier()’ functions with Y values outside of [0, 1]) map to the closer endpoint; if neither value is ‘visible’ then not interpolable.

1. プロパティの値の片方がvisibleだった場合、timing-functionの計算値が0より大きく1未満のとき'visible'扱いする
2. timing-functionの計算値が0未満の場合は0、1より大きかった場合は1扱いする
3. プロパティ値の両方がvisibleでない場合、なにもしない

つまり以下のようなコードがあった場合 #sample-wrap にマウスオーバーすると、すぐに#sampleが現れ、マウスアウトすると1秒後に#sampleが消えます。

css

#sample-wrap {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
}

#sample {
  width: 100px;
  height: 100px;
  background: #f00;
  visibility: hidden;
  -webkit-transition: visibility 1s ease-out;
  -moz-transition: visibility 1s ease-out;
  transition: visibility 1s ease-out;
  cursor: pointer;
}

#sample-wrap:hover #sample {
  visibility: visible;
}

これは置き換えルールの1で 0 < value < 1 の区間がvisible扱いされるためです。