2015.10.20

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

Category: css

Tags, , , ,

サンプル

マウスオーバー

テキストフェードイン

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

html

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

css

.hover {
	background: #fff;
	padding: 15px;
	width: 200px;
}
.hover:hover .text {
	opacity: 1;
}
.text {
	opacity: 0;
	color: red;
	-moz-transition: opacity 0.3s ease;
	-o-transition: opacity 0.3s ease;
	-webkit-transition: opacity 0.3s ease;
	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);
}

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

参考リンク

Category : css