Edited at

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

More than 3 years have passed since last update.

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

http://codepen.io/bukurocci/pen/zxBmbN


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