CSS3：transitionのフェードアウトにはopacityを使う

サンプルはこちら

See the Pen tEeJK by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen.

transitionのアニメーション表現を改めておさらい。
フェードイン表現にはdisplayではなくopacityを使う必要があります。

CSS(Sass)

.box1 {
  p {
    display: block;
    @include transition(1s);   
  }  
  &:hover {
    p {
      display: none;
    }
  }
}
.box2 {
  p {
    @include opacity(1);
    @include transition(1s);
  }
  &:hover {
    p {
      @include opacity(0);
    }
  }
}

box1はマウスオーバー時にdisplayを使って<p>タグの表示を切り替えています。
対してbox2はopacityを使って<p>タグの表示を切り替えています。

transitionによるアニメーション効果は、値が数値のもののみ有効です。

displayはblock/noneといった設定名のためアニメーションが適用されず、opacityは1～0までの小数点数値が存在するためアニメーションが適用されます。フェードアウト表現をしたい時はここを注意しましょう。

※注意

opacityは0にしても色が透明になっているだけで、block:none と異なりオブジェクトとして存在しています。その辺りの制御はJavaScriptなどで工夫が必要になります。