本文我们将使用css来实现透明度发生变化的动画，可以获得淡入和淡出效果。

要实现CSS中透明度更改的动画，需要使用的是transition属性。由于transition属性是CSS3中的新增属性，因此有必要在一些可支持的浏览器上运行时加上前缀。

像是Chrom，Safari编写为“-webkit-transition”，为FireFox编写“-moz-transition”，为Internet Explorer编写“-ms-transition”，为Opera编写“-o-transition”；如果它是最新的Web浏览器（Internet Explorer 11，Microsoft Edge），则直接使用“transition”属性而不需要加上前缀。（相关推荐：CSS3在线手册）

语法：

transition: all [变化时间];

对于[变化时间]，指定动画更改的时间

立即学习“前端免费学习笔记（深入）”；

例子：

以下示例是在3秒内动画。

transition: all 3s;

代码实例如下：

创建以下HTML文件。

fade.html

            <ｓｃｒｉｐｔ type="text/javascript">        function FadeOutLinkClick() {                    var frame = document.getElementById("FadeOutDivFrame");            frame.className = "FadeOutFrame fadeout";        }                function FadeInLinkClick() {                  var frame = document.getElementById("FadeInDivFrame");          frame.className = "FadeInFrame fadein";        }                              
按钮。
  淡出  
  
框架。
  淡入    

fade.css

.FadeOutFrame {    width: 320px;        height: 180px;        background-color: #abffe8;        border: 1px solid #0067aa;        opacity: 1;}.FadeOutFrame.fadeout{  -webkit-transition: all 1.5s;    -moz-transition: all 1.5s;    -ms-transition: all 1.5s;    -o-transition: all 1.5s;    transition: all 1.5s;    opacity: 0;}.FadeInFrame {    width: 320px;        height: 180px;        background-color: #ffd3d3;        border: 1px solid #b50042;        opacity: 0;}.FadeInFrame.fadein{  -webkit-transition: all 1.5s;    -moz-transition: all 1.5s;    -ms-transition: all 1.5s;    -o-transition: all 1.5s;    transition: all 1.5s;    opacity: 1;}

说明：点击“淡出”链接时，将“FadeOutDivFrame”框的类别从“FadeOutFrame”更改为“FadeOutFrame fadeout”，“FadeOutFrame fadeout”设置了transition属性和opacity: 0;，因为transition属性和opacity: 0;已经设置了，所以就淡出为透明动画。

效果如下：

本篇文章到这里就全部结束了，更多相关内容大家可以关注本站的CSS3视频教程栏目！！！