cssでフェードを実装

今回の記事では、aタグのhoverに対して、フェードをかけていきます。
つまり、リンクに対して、マウスをおいた時にフェードがかかるような物を作っていきます。

サンプルコード

HTML

 <a class="fadeOut" href="">フェードアウトします</a>
  <a class="fadeOutDown">フェードダウンします</a>
  <a class="fadeOutUp">フェードアップします</a>

CSS

.fadeOut{
    transition:1s all;
    opacity:1;
}
.fadeOut:hover{
    opacity:0;
    transition:1s all;
}
.fadeOutDown{
    transition:1s all;
    opacity:1;
    display:block;
}
.fadeOutDown:hover{
    display:block;
    opacity:0;
    transform: translateY(20px);
    transition:1s all;
}
.fadeOutUp{
    transition:1s all;
    opacity:1;
    display:block;
}
.fadeOutUp:hover{
    display:block;
    opacity:0;
    transform: translateY(-20px);
    transition:1s all;
}

上記の考え方としては、aタグをhoverした際に、迷彩度であるopacityを０にすることで、hoverした際に文字を消すと言う動作を指定します。
ただこれだけでもふわっとしたエフェクトをかけることはできないので、hoverした際に、transitionを指定することで、ディレイをかけます。今回はopacity:0になるまでに１秒かけてくださいと指定あるので、１秒かけて文字が消えていきます。また、hover時にだけディレイを指定した場合、aのhoverを解除した際に文字がパッと表示されてしまいますので、元の要素にも(ここでは、fadeOut）にも指定することでhoverを外した際にも時間かけて戻っていくという動作が実現することができます。
上述のfadeOutDownやfadeOutUpも同じような考えとなります。

サンプルコードの実行例