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