* **本文我们将使用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”属性而不需要加上前缀。**
**语法:**
````
transition: all [变化时间];
````
* 对于\[变化时间\],指定动画更改的时间
* 例子:
* 以下示例是在3秒内动画。
````
transition: all 3s;
````
代码实例如下:
创建以下HTML文件。
fade.html
````
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;已经设置了,所以就淡出为透明动画。
效果如下:
![GIF.gif][]
本篇文章到这里就全部结束了。
[GIF.gif]: /images/1612025330864.gif