CSSまたはjQueryを使って、ホバー時に一瞬だけ点滅するエフェクトを実装する方法

Tips

CSSまたはjQueryを使って、ホバー時に一瞬だけ点滅するエフェクトを実装する方法

このブログではロゴや記事中の画像などにホバーすると一瞬だけ点滅する(光る)ような感じのエフェクトをつけているんですが、先日この実装方法についてご質問をいただいたので、その回答も兼ねてご紹介します。
現在使用しているのはCSSを使用した方法ですが少し前はjQueryを使用して実装していたので、それぞれの方法を紹介したいと思います。

November 26, 2014 追記

Manaさんからコメントいただいたので追記しました。

※以下の方法はブラウザ(特に古いバージョンのIE)によっては動きを確認できないものになるので、ひと通りのブラウザで問題ない動きにしたい場合は内容を変更する必要があります。

CSSで実装する

CSSで実装したい場合はopacityを使った透過処理をanimation@keyframesを使ったアニメーションと組み合わせる形で実装でき、下記のように記述します。

CSS

a:hover {
  opacity: 1;
  -webkit-animation-duration: 1s;
  -webkit-animation-name: flash;
  animation-duration: 1s;
  animation-name: flash;
}
@-webkit-keyframes flash {
  0% {
    opacity: .4;
  }
  100% {
    opacity: 1;
  }
}
@keyframes flash {
  0% {
    opacity: .4;
  }
  100% {
    opacity: 1;
  }
}

上記を記述することで、a要素にホバーした時に一瞬だけ点滅するようなエフェクトを実装することができます。
もっと点滅を早くしたいなど動きを変えたい場合は、animation-durationの秒数や@keyframes0%で指定しているopacityの値を調整してみてください。

追記:ショートハンドでの記述方法を追記しました

WebクリエイターボックスのManaさんから “ショートハンド使えばスッキリする” とコメントをいただき、たしかにその通りなので追記しました。(ご指摘ありがとうございます)
上記でanimationを記述している箇所は、下記のように短く記述することもできます。

CSS

a:hover {
  opacity: 1;
  -webkit-animation: flash 1s;
  animation: flash 1s;
}

実際の動きは以下デモの上部イメージで確認できます。

jQueryで実装する

jQueryで実装する場合でも基本的にCSSとやっていることは同じで、opacityを使った透過処理を.animate()を使ってアニメーションしているものになります。
jQueryを使用するので予め読み込ませおき、下記のように記述します。

jQuery

$(function() {
  $('a').mouseover(function(){
    $(this).css('opacity', '.4').animate({'opacity': '1'}, 'slow');
  });
});

もう少し動きを変更したいという場合は、slowと記述されている部分や.css()で指定しているopacityの値を調整することで変更できます。

実際の動きは以下デモの下部イメージで確認できます。

Close the search window,
please press close button or esc key.