CSS animation of transparency changes (fade in and fade out effect)-CSS Tutorial-php.cn

CSS animation of transparency changes (fade in and fade out effect)

不言

Release： 2018-11-09 14:28:30

Original

32295 people have browsed it

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 [变化时间];

Copy after login

For [change time], specify the time of animation change

Example :

The following example is animated within 3 seconds.

transition: all 3s;

Copy after login

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>

Copy after login

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;
}

Copy after login

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:

CSS animation of transparency changes (fade in and fade out effect)

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!