ホバー時にピカッと光らせるホバーアニメーション【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;
  }
}

コメント

タイトルとURLをコピーしました