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

2022年6月13日月曜日

Web

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

アイキャッチ

結論

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

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

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

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

AIエンジニア向けフリーランスならここがおすすめです

まずは無料会員登録

プロフィール

自分の写真
製造業に勤務する傍ら、日々AIの技術動向を調査しブログにアウトプットしています。 AIに関するご相談やお仕事のご依頼はブログのお問い合わせフォームか以下のアドレスまでお気軽にお問い合わせください。 bhupb13511@yahoo.co.jp

カテゴリ

このブログを検索

ブログ アーカイブ

TeDokology