CSS3：アニメーション透過処理の注意点

CSS3アニメーションで透過処理をする場合、「opacity」を使います。

.box {
  background:#09c;
  opacity: 1;
  transition: 0.5s ease-in-out;
  -webkit-transition: 0.5s ease-in-out;
  -moz-transition: 0.5s ease-in-out;
}
.box:hover {
  opacity: 0;
}

ただし「opacity」の場合は色を透明にするのであって、オブジェクトが消えるわけではなく、実態分のスペースが残ります。

.box:hover {
  opacity: 0;
  display: none;
}

かといって上記のようにしても、アニメーションは全てにプロパティが同時に処理されるので、アニメーションなく瞬間的に消えてしまいます。

表示サンプル： http://jsdo.it/goto_jp/5Re7

transition の終了時に「transitionend」のイベントが発生するので、それをJSで拾って次に display を消すといった一手間が必要になります。