CSS PR

ホバー時にピカッと光らせるホバーアニメーション【CSSのみ】

記事内に商品プロモーションを含む場合があります

画像やコンテンツをマウスオン時にピカッと一瞬光らせるホバーアニメーションです。
CSSのみで実装できます。


<div class="flash_img"><img src="画像のパス"></div>

.flash_img:hover{
opacity: 1;
-webkit-animation: flash 1.5s;
animation: flash 1.5s;
}
@-webkit-keyframes flash {
  0% {
  opacity: .4;
  }
  100% {
  opacity: 1;
  }
}
@keyframes flash {
  0% {
  opacity: .4;
  }
  100% {
  opacity: 1;
  }
}
ABOUT ME
シラツキ
Web制作会社で働くフロントエンドエンジニア(コーダー)。 ココナラでもお仕事募集しております。 HTML,CSS,JS,WordPress,EC-CUBE,Next.jsなど制作に役立つ情報を発信していきます。 webサイトの運営、修正、制作などお仕事も募集中! お気軽にご相談ください。