Web production note

 【更新日 :

【css】マウスオーバーで要素をフェードインさせる

Category:
css

要素をcssでフェードインさせるサンプルです。
cssでアニメーションさせるにはtransitionを使います。

html

<div class="hover">
	<p>マウスオーバー</p>
	<p class="text">テキストフェードイン</p>
</div>

opacity以外でもアニメーションを適当する場合は transitionのopacityをallに。
時間やイージングも自由にカスタマイズ可能です。

css

.hover {
	background: #fff;
	padding: 15px;
	width: 200px;
}
.hover:hover .text {
	opacity: 1;
}
.text {
	opacity: 0;
	color: red;
	transition: opacity 0.3s ease;
}

sass / compass

.hover {
	background: #fff;
	padding: 15px;
	width: 200px;
	&:hover .text {
		opacity: 1;
	}
}
.text {
	opacity: 0;
	color: red;
	@include transition(opacity 0.3s ease);
}

参考リンク

目次 を閉じる