CSSでホバーすると蛍光ペンで線を引いたようなアニメーション

CSSで蛍光ペン風の線を引く方法は広く知られていますが、それをアニメーションさせる方法はあまり知られていないようなので紹介します。蛍光ペン風の線自体は linear-gradient() を使えば表現できます。

蛍光ペン風のアニメーション


<div class="marker">
  <span>
    あのイーハトーヴォの<br>
    すきとおった風、<br>
    夏でも底に冷たさを<br>
    もつ青いそら、
  </span>
</div>

.marker span {
  background-image: -webkit-linear-gradient(left, #ffe653 50%, transparent 50%);
  background-image: linear-gradient(to right, #ffe653 50%, transparent 50%);
  background-position: 100% 0%;
  background-size: 200% auto;
  background-repeat: no-repeat;
  -webkit-transition: background-position .5s ease-out;
  transition: background-position .5s ease-out;
}
.marker:hover span {
  background-position: 0% 0%;
}

テキストの上にマウスホバーすれば蛍光ペンの線が引かれるようなアニメーションをします。


.marker span {
  background: -webkit-linear-gradient(left, #ffe653 50%, transparent 50%) 100% 0% / 200% auto no-repeat;
  background: linear-gradient(to right, #ffe653 50%, transparent 50%) 100% 0% / 200% auto no-repeat;
  -webkit-transition: background-position .5s ease-out;
  transition: background-position .5s ease-out;
}
.marker:hover span {
  background-position: 0% 0%;
}

background のショートハンドを使えばまとめてスッキリ書くこともできます。

仕組み

まず、background-size200% にしてテキストの2倍の大きさの背景にします。あとは background-position を変えてスライドアニメーションさせているだけです。ちなみに同じようなアニメーションを background-size を使って表現することもできますが、IEでは background-sizetransition が効かないので使っていません。


.marker:hover span {
  background-position: 0% 0%;
  /* background-position: 0 0; ← これはダメ */
}

また、気をつける必要があるのが、0% のように 0 であっても単位は必ずつけてください。これをしないとIEでアニメーションの際にスライドアニメーションが戻らなくなるなどの問題が起きます。

細かな配慮

細かなことですが、たまに上図のように「あ」の前に黄色い背景色が見切れる現象が起きます。これはおそらくブラウザが小数点以下の数値を扱う際に発生する誤差のようなものだと思われますが、このままでは気になるので修正します。


.marker span {
  background: -webkit-linear-gradient(left, #ffe653 50%, transparent 50%) 100% 0% / 202% auto no-repeat;
  background: linear-gradient(to right, #ffe653 50%, transparent 50%) 100% 0% / 202% auto no-repeat;
  -webkit-transition: background-position .5s ease-out;
  transition: background-position .5s ease-out;
}

先ほどのソースコードの background-size の部分を 200% から少し大きめの 202% に変更します。これでこの問題は修正できます。

より蛍光ペンらしく

背景の高さを小さく


.marker span {
  background: -webkit-linear-gradient(left, #ffe653 50%, transparent 50%) 100% bottom / 200% 70% no-repeat;
  background: linear-gradient(to right, #ffe653 50%, transparent 50%) 100% bottom / 200% 70% no-repeat;
  -webkit-transition: background-position .5s ease-out;
  transition: background-position .5s ease-out;
}
.marker:hover span {
  background-position: 0% bottom;
}

background-size200% auto から 200% 70% のように高さを全部覆うのではなく、少し小さくしてみるとより蛍光ペンっぽくなります。

背景を下にずらす


.marker span {
  padding-bottom: .2em;
  background: -webkit-linear-gradient(left, #ffe653 50%, transparent 50%) 100% bottom / 200% 50% no-repeat;
  background: linear-gradient(to right, #ffe653 50%, transparent 50%) 100% bottom / 200% 50% no-repeat;
  -webkit-transition: background-position .5s ease-out;
  transition: background-position .5s ease-out;
}
.marker:hover span {
  background-position: 0% bottom;
}

padding-bottom で下にずらすことによってよりおしゃれになります。