本文我们将使用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
<!doctype html><html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title></title> <link rel="stylesheet" href="fade.css" /><meta charset="utf-8" /> <script 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"; } </script> </head> <body> <div id="fadeoutdivframe" class="fadeoutframe">按钮。</div> <a id="fadeout" href="javascript:void(0);" onclick="fadeoutlinkclick();">淡出</a> <hr/> <div id="fadeindivframe" class="fadeinframe">框架。</div> <a id="fadeout" href="javascript:void(0);" onclick="fadeinlinkclick();">淡入</a> </body> </html>
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视频教程栏目！！！
以上就是css实现透明度变化的动画 （淡入淡出效果）的详细内容。