animation css 透明度逐渐_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”属性而不需要加上前缀。(相关推荐：CSS3在线手册)

语法：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");