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的配合可实现淡出淡入效果。