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

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

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

2014年11月26日 追記
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の値を調整することで変更できます。

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

もっと良い実装方法があるとかダメ出しとかあれば是非教えてください。

Back to Top

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

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

/ Tips

Tagged with:

NxWorld

Sorry... doesn't support your browser

To get the best possible experience using our site we recommend that you upgrade to a modern web browser.NxWorldではご利用中のブラウザサポートはしていません。
Internet Explorerのアップグレード行う、もしくはその他のブラウザを使用しての閲覧をお願いします。