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

goto_jp 2,260views 更新:2014年6月10日

サンプルはこちら

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 と異なり存在しています。その点の工夫も必要になります。

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません