Home > Article > Web Front-end > CSS animation of transparency changes (fade in and fade out effect)
CSS animation of transparency changes (fade in and fade out effect)
- 不言Original
- 2018-11-09 14:27:4432247browse
In this article we will use CSS to animate transparency changes and obtain fade-in and fade-out effects.
To implement animation of transparency changes in CSS, you need to use the transition attribute. Since the transition attribute is a new attribute in CSS3, it is necessary to add a prefix when running on some supported browsers.
Like Chrom, Safari is written as "-webkit-transition", FireFox is written as "-moz-transition", Internet Explorer is written as "-ms-transition", and Opera is written as "-o-transition" ; If it is a recent web browser (Internet Explorer 11, Microsoft Edge), use the "transition" attribute directly without prefixing it. (Related recommendations: CSS3 Online Manual)
Syntax:
transition: all [变化时间];
For [change time], specify the time of animation change
Example :
The following example is animated within 3 seconds.
transition: all 3s;
The code example is as follows:
Create the following HTML file.
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;
}Description: Change the category of the "FadeOutDivFrame" box from "FadeOutFrame" when clicking the "Fade Out" link The transition attribute and opacity: 0; are set for "FadeOutFrame fadeout" and "FadeOutFrame fadeout". Because the transition attribute and opacity: 0; have been set, it fades out to a transparent animation.
The effect is as follows:
This article ends here. For more related content, you can pay attention to the CSS3 video on the php Chinese website Tutorial column! ! !
The above is the detailed content of CSS animation of transparency changes (fade in and fade out effect). For more information, please follow other related articles on the PHP Chinese website!