HTML / CSS

テキストリンクのホバーアニメーション

透過する

基本中の基本であるホバー時に透過する

文字色の変更

ホバー時に文字色を変更する

文字色と背景色の変更

ホバー時に文字色に加え、背景色も変更する

文字色の変更と背景色が左から右に流れる

ホバー時に文字色の変更に加えて、背景色が左から右に流れる

下線が左から右へ流れる

ホバー時に下線が左から右に流れるように表示

下線が右から左へ流れる

ホバー時に下線が右から左に流れるように表示

下線が中央から広がる

ホバー時に下線が中央から広がるように表示

下から上へフェードインする下線

疑似要素の下線がホバー時に下から上へフェードインする

左からフェードインする下線

疑似要素の下線がホバー時に下から左からフェードインする

左からフェードインする下線

疑似要素の下線がホバー時に下から左からフェードインする

文字間が広がる

ホバー時に「letter-spacing」を変更して文字間を広げる

拡大する

ホバー時に「transform」の値「scale」で拡大する

上下に回転する

「text-shadow」で上下に影を作りホバー時に表示切替する

上下に回転する(背景色つき)

「text-shadow」で上下に影を作りホバー時に表示切替する

縦に回転する

ホバー時に「transform」の値「rotateX」で縦回転させる

横に回転する

ホバー時に「transform」の値「rotateY」で縦回転させる

上に移動する

ホバー時に「transform」の値「translateY」で上に移動させる

文字をぼかす

ホバー時に「filter」の値「blur」でぼかす

傾ける(パース)

左側から丸が現れる

疑似要素の「●」がホバー時にスライドして表示する

テキストカラーが左から変化する

テキストの背景をぼかす