CSS过渡效果:transition属性

div
{
width:100px;
transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari 和 Chrome */
-o-transition: width 2s; /* Opera */
}


all能使所有属性都具有过渡效果


注意:transition对display无效,需要用visibility属性代替。

.info {
	opacity: 0;
	visibility: hidden;
	-webkit-transition: all 0.5s;
}

#button:hover .info {
	opacity: 1;
	visibility: visible;
}
通过opacity和visibility的配合可实现淡出淡入效果。


你可能感兴趣的:(CSS)