CSSのみで要素をfade In/Outをする方法【:target】

実装

HTML

  <a href="#fade">fade in</a>
  <a href="#">fade Out</a>
  <article class="fade" id="fade">
    Hello, world.
  </article>

SCSS

.fade {
  display: none;
  &:target {
    display: block;
  }  
}

簡単。

擬似クラス:target

フラグメント(#で記述したやつ)付きのURLとidを紐づけると、:targetでプロパティをいじることができる。すごい。