css怎么动画中该透明度,CSS如何实现透明度变化的动画

CSS如何实现透明度变化的动画

发布时间：2020-10-19 15:55:49

来源：亿速云

阅读：73

作者：小新

这篇文章将为大家详细讲解有关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");

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

效果如下：

关于CSS如何实现透明度变化的动画就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。