热的表情包CSS实现透明度变化的动画（淡⼊淡出效果）本⽂我们将使⽤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”属性⽽不需要加上前缀。
语法：
社会交往1transition: all[变化时间];
对于[变化时间]，指定动画更改的时间
例⼦：
以下⽰例是在3秒内动画。
1transition: all3s;
代码实例如下：幼儿园对联
创建以下HTML⽂件。
fade.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23
24 25 26<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type"content="text/html; chart=utf-8"/>
<title></title>
<link rel="stylesheet"href="fade.css"/>
<meta chart="utf-8"/>
<script type="text/javascript">
function FadeOutLinkClick() {
var frame = ElementById("FadeOutDivFrame");
frame.className = "FadeOutFrame fadeout";
}
function FadeInLinkClick() {
var frame = ElementById("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搞笑动态图片
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30.FadeOutFrame {
width: 320px;
height: 180px;
background-color: #abffe8; border: 1px solid#0067aa; opacity: 1;
}
.FadeOutFrame.fadeout{
-webkit-transition: all1.5s; -moz-transition: all1.5s;
bl动画-ms-transition: all1.5s;个人述职
-o-transition: all1.5s;
transition: all1.5s;
opacity: 0;
}
.FadeInFrame {
width: 320px;
height: 180px;
background-color: #ffd3d3; border: 1px solid#b50042; opacity: 0;
}
.FadeInFrame.fadein{
-webkit-transition: all1.5s; -moz-transition: all1.5s;
-ms-transition: all1.5s;
-o-transition: all1.5s;
transition: all1.5s;
opacity: 1;
}
说明：点击“淡出”链接时，将“FadeOutDivFrame”框的类别从“FadeOutFrame”更改为“FadeOutFrame
fadeout”，“FadeOutFrame fadeout”设置了transition属性和opacity: 0;，因为transition属性和opacity: 0；已经设置了，所以就淡出为透明动画。
效果如下：
本篇⽂章到这⾥就全部结束了。
