摘要 今天小编跟大家讲解下有关CSS实现DIV从隐藏到展示的过渡效果 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关CSS实现DIV从隐

今天小编跟大家讲解下有关CSS实现DIV从隐藏到展示的过渡效果 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关CSS实现DIV从隐藏到展示的过渡效果 的相关资料，希望小伙伴们看了有所帮助。

css中有很多功能强大的方法，其中过渡属性transition就很牛叉。你不用写一行JavaScript代码，随便写点css就可以实现一个动画效果。下面结合我在W3C网站上看到的实例，举个栗子说明下(⊙o⊙)…

上面是一个过渡动画的demo，效果是不是很帅啊！

<style>.animated_div{ font-size: 12px; width:50px; height:40px; background:#92B901; color:#ffffff; position:relative; font-weight:bold; padding:8px 8px 0px 8px; margin:5px; -webkit-transition:-webkit-transform 1s,background 1s,width 1s,height 1s,font-size 1s; -o-transition-property:width,height,-o-transform,background,font-size; -o-transition-duration:1s,1s,1s,1s,1s; -moz-transition-property:width,height,-o-transform,background,font-size; -moz-transition-duration:1s,1s,1s,1s,1s; transition-property:width,height,transform,background,font-size; transition-duration:1s,1s,1s,1s,1s;}.animated_div:hover{ -moz-transform: rotate(720deg); -webkit-transform: rotate(720deg); -o-transform: rotate(720deg); transform: rotate(720deg); padding:12px 8px 0 15px; background:#1ec7e6; width:75px; height:60px; font-size:16px;}</style><div class="animated_div">鼠标碰我(*^__^*)</div>

额，跑题了(⊙o⊙)…

在开发的过程中，我们会发现transition过渡属性对于页面元素的显隐并没有提供过渡方法！这就导致元素从display：none到display：block的过程中，瞬发没有过渡效果。这里我们可以换个思路，用透明度解决这个问题，通过透明度opacity属性从0到1的变化模拟元素的显隐，并且过渡属性transition是提供对透明度opacity属性的过渡的。在使用透明度的时候要注意兼容IE浏览器。下面，举个栗子(⊙o⊙)…

<style>.animated_opacity{ font-size: 12px; width:190px; 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)}</style><div class="animated_opacity">鼠标碰我的话，我就消失(*^__^*)</div>

来源：爱蒂网