光る画像

概要

• ホバーしたら光る
• 一定の間隔で光る

原理

• 斜めに変形させた白い四角形（平行四辺形）を高速で横に動かし、画像の上を横切らせる。
• 四角形は画像を囲うdivのbefore 擬似要素に設定。
• div自体にはdisplay: inline-block とoverflow: hiddenをかけることで、画像の表示領域から外れた部分の白い四角形は見えなくする。

備考

ホバー時に光る

• ホバー時にtransitionを設定することで、ホバーした時のみアニメーションする（サンプル一番左）
• ホバー擬似要素を使わず、クラス自体にtransitionを設定すると、ホバーが外れた時にも逆方向に戻るアニメーションをしてしまう（サンプル中央）

自動アニメーション

サンプル一番右。

• 無限アニメーション。
• 間隔を空けてアニメーションさせるようにしている。
• animation: bright 3s ← アニメーションの実行時間を（アニメーションを実際にさせる時間＋間隔を空けたい時間）に設定。
• keyframesを途中時点（サンプルだと15%）でアニメーションが完了するような設定にし、100%にも同じ設定を適用。
• 上記で、15％〜100％までのアニメーション時間が待機時間になる。

サンプルコード

• 実行サンプル

<div class="imgBright">
  <img src="http://lorempixel.com/100/100/cats">
</div>

<div class="imgBright2">
  <img src="http://lorempixel.com/100/100/cats">
</div>

<div class="imgBright3">
  <img src="http://lorempixel.com/100/100/cats">
</div>

.imgBright,
.imgBright2,
.imgBright3 {
  position: relative;
  display: inline-block;
  overflow: hidden;
}

.imgBright:before,
.imgBright2:before,
.imgBright3:before {
  content: "";
  background-color: rgba(255, 255, 255, 0.4);
  height: 100%;
  width: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: -160%;
  transform: skewX(-45deg) translateX(0);
}

.imgBright2:before {
  transition: all 0.4s ease-in-out;
}

.imgBright:hover:before,
.imgBright2:hover:before {
  transform: skewX(-45deg) translateX(320%);
  transition: all 0.4s ease-in-out;
}

.imgBright3:before {
  animation: bright 3s ease-in-out 2s infinite;
}

@keyframes bright {
  0% {
     transform: skewX(-45deg) translateX(0);
  }
  15% {
    transform: skewX(-45deg) translateX(320%);
  }
  100% {
    transform: skewX(-45deg) translateX(320%);
  }
}

元ネタ

https://teratail.com/ のアイコン部分の演出。