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

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

実際の動きは以下デモで確認できます。

CSSで実装する

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

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の秒数や@keyframesの0%で指定しているopacityの値を調整してみてください。

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

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

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

jQueryで実装する

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

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

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