[CSSのみ] テキストのマウスオーバーにアニメーションを付ける

2022年6月13日月曜日

Web

本記事では、マウスを乗せたとき・外したときの両方でアニメーションを付ける方法をご紹介します。

アイキャッチ

結論

下記では以下のアニメーションを付与しています。

  1. マウスを乗せた(マスクオーバー)とき、左から右へと背景色を表示
  2. マウスを外したとき、左から右へと背景色を削除

See the Pen MouseOverAnimation by kaz12 Tech (@kaz12-Tech) on CodePen.

処理概要としては、::beforeで左端に置いておいた疑似要素を、
マウスオーバー時に右端まで引き延ばしてアニメーションを表現しています。
同様にマウスを外した際に、疑似要素を右端に折りたたむことでアニメーションを表現しています。

AIで副業ならココから!

まずは無料会員登録

プロフィール

メーカーで研究開発を行う現役エンジニア
組み込み機器開発や機会学習モデル開発に従事しています

本ブログでは最新AI技術を中心にソースコード付きでご紹介します


Twitter

カテゴリ

このブログを検索

ブログ アーカイブ

TeDokology