CSS实现透明度变化的动画（淡入淡出效果）

互联网 18-11-9

本文我们将使用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 [变化时间];

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

例子：

transition: all 3s;

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;已经设置了，所以就淡出为透明动画。

效果如下：