Slack風のハイライトアニメーションを数行のCSSのみで作成する

作るもの

SlackはこまかいところまでUIにこだわりを感じるサービスですが、中でも特定のメッセージにリンクからジャンプした際、一瞬黄色くハイライトして数秒で消えていくのが地味に好きです。

どこにジャンプしたのかが一目瞭然で、なおかつ画面を汚さない表現ですよね。

これと似たような効果を簡単なCSSのみで再現してみました。アンカーリンク <a href="#..."> を使ってページ内スクロールをしているWebページに、すぐに導入できる方法です。

デモ:

See the Pen Slack Highlight Effect by HIRATA (@psephopaikes) on CodePen.

作り方

コードはこんだけです。

html

<!-- リンク -->
<a href="#link">David Verner</a>

...

<!-- リンク先 -->
<h2 id="link" class="highlight">David Verner</h2>

css

.highlight:target{
    animation: highlight 4s;
}
@keyframes highlight {
    0%   { background: #FFC }
    100% { background: none }
}

解説

:target疑似属性とCSSのkeyframeアニメーションで実現しています。

:target疑似属性とは、要は「ページ内アンカースクロールで、要素にジャンプしたときに対象となる」属性です。上記CSSの例であれば、.highlight:targetの部分は、「highlightというクラスを持つ要素に、アンカーリンクでジャンプしたら」スタイルanimation: highlight 4s;の部分が適応されます。カンタンですね。