【CSSだけで出来る】transitionでWebページにちょっとした動きをつける

こんにちは。

JavascriptやjQueryを使わなくてもcssのtransitionで動きが付けられることを知り、よさげな使い方をピックアップしました。

·

1.テキストにマーカーを引く

ホバーしたとき、マーカーを引きます。

See the Pen
marker by rika (@rikarin987)
on CodePen.

2.中心からアンダーラインを引く

ホバーしたとき、中心からアンダーラインを引く

See the Pen
Untitled by rika (@rikarin987)
on CodePen.

3.ボタンを広げる

ボタンが広がります。
ボタンじゃなくてもブロックとかでもできます。

See the Pen
Untitled by rika (@rikarin987)
on CodePen.

4.背景がじんわりと色づく

See the Pen
box by rika (@rikarin987)
on CodePen.

transitonやtransformを使えば、
CSSだけでも動きがあるページが作れそうですね。