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-size
を 200%
にしてテキストの2倍の大きさの背景にします。あとは background-position
を変えてスライドアニメーションさせているだけです。ちなみに同じようなアニメーションを background-size
を使って表現することもできますが、IEでは background-size
の transition
が効かないので使っていません。
.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-size
を 200% 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
で下にずらすことによってよりおしゃれになります。
CSS本執筆しました!!!
CSS本出します!1/29発売予定
— たかもそ@CSS本1/29発売!! (@takamosoo) 2018年12月31日
自分がCSS学びたての頃にもっとはやく知りたかったテクニックを載せています。CSSの基礎知識について解説していないので、中級者〜向けとなります。CSS入門書を読んではみたものの、思い通りに作れない人にオススメです。
よろしくお願いします。https://t.co/fkz1dM03Pj pic.twitter.com/suYyaPqwIs