このブログではロゴや記事中の画像などにホバーすると一瞬だけ点滅する（光る）ような感じのエフェクトをつけているんですが、先日この実装方法についてご質問をいただいたので、その回答も兼ねてご紹介します。現在使用しているのはCSSを使用した方法ですが少し前はjQueryを使用して実装していたので、それぞれの方法を紹介したいと思います。
※以下の方法はブラウザ（特に古いバージョンの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の秒数や@keyframesの0%で指定しているopacityの値を調整してみてください。
実際の動きは以下で確認できます。
jQueryで実装する
jQueryで実装する場合でも基本的にCSSとやっていることは同じで、opacityを使った透過処理を.animate()を使ってアニメーションしているものになります。
jQueryを使用するので予め読み込ませおき、以下のように記述します。
jQuery
$(function() {
$('a').mouseover(function(){
$(this).css('opacity', '.4').animate({'opacity': '1'}, 'slow');
});
});もう少し動きを変更したいという場合は、slowと記述されている部分や.css()で指定しているopacityの値を調整することで変更できます。
実際の動きは以下で確認できます。
もっと良い実装方法があるとかダメ出しとかあれば是非教えてください。