本文介绍CSS3实现DIV图层隐藏到显示的过渡效果，可用于产品列表的产品简介过渡显示与隐藏等，希望对你有所帮助。

CSS3的transition过渡属性对于页面元素的显隐并没有提供过渡方法！所以DIV图层从display：none到display：block的过程中，瞬发没有过渡效果。

因此我们可以用透明度解决这个问题，通过透明度opacity属性从0到1的变化模拟元素的显隐，并且过渡属性transition是提供对透明度opacity属性的过渡的。但是在使用透明度的时候要注意兼容IE浏览器。

示例代码：

.animated_opacity{

font-size: 12px;

width:300px;

height:25px;

background:#92B901;

color:#ffffff;

position:relative;

font-weight:bold;

padding:8px 8px 0px 8px;

margin:5px;

opacity: 1;

filter:Alpha(opacity=100);

transition: opacity 2s;

}

.animated_opacity:hover{

opacity: 0;

filter:Alpha(opacity=0)

}

HTML代码：