CSSのTransitionでリンクのホバー時のアクションを全部一気にさりげなくふわっとさせる方法

前からtransition使ってみたかったけど、使う機会がなかったので、ブログをMTからWPに移行した際にリンクを全部ふわっとさせることにした。

やり方は、ものっそい簡単で、CSSでaにアニメーションだけ定義して、全部継承させます。

CSS

a {
	-webkit-transition:0.3s ease;
	-webkit-transition-property:opacity,border,color,background;

	-moz-transition:0.3s ease;
	-moz-transition-property:opacity,border,color,background;

	-o-transition:0.3s ease;
	-o-transition-property:opacity,border,color,background;
	
	transition:0.3s ease;
	transition-property:opacity,border,color,background;
}

上記のコードを見てもらうと分かるとおり、使うプロパティはたった2種類で、transitionプロパティのショートハンドで、アニメーション時間と、アニメーションの種類を設定。
そして、hoverに指定されているプロパティのopacity,border,color,backgroundなどに変化を付けることが多いので、この4つを指定しておくと、それらがhoverで切り替わる場合、アニメーションが適用されます。

※Firefoxは4から対応のようです。

comments powered by Disqus
« Newer Older »