Edited at


More than 3 years have passed since last update.




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が消えます。



#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扱いされるためです。