CSSで点滅アニメーション

マウスが乗ったら特定の場所を点滅させるアニメーション。

opacityを使って点滅

<p>テキストを<span class="flash1">点滅</span>させます</p>

p:hover > .flash1{
  animation: Flash1 1s infinite;
}

/* アニメーション */
@keyframes Flash1{
  50%{
    opacity: 0;
  }
}

text-shadowを使って点滅

<p><span class="flash2">重要な部分</span>を強調させる時に使えます。</p>

p:hover > .flash2{
  animation: Flash2 2s infinite;
}

/* アニメーション */
@keyframes Flash2{
  50%{
    text-shadow: 1px 1px 0 red;
  }
}

box-shadowを使って点滅

<p class="flash3">text-decoration: blink;は非推奨</p>

.flash3{
  display: inline-block;
  white-space: nowrap;
}

.flash3:hover {
  animation: Flash3 2s infinite;
}

/* アニメーション */
@keyframes Flash3{
  50%{
    text-shadow: 1px 1px 0 red;
    box-shadow: 0 1px 15px 0 blue;
  }
}

画像も点滅

<p><img src="sample.png" width="200" height="200"></p>

p:hover > img{
  animation: Flash4 2s infinite;
}

/* アニメーション */
@keyframes Flash4{
  50%{
    box-shadow: 0 1px 15px 1px blue;
  }
}