How to realize the fade-in effect of web pages by css3

This article mainly explains "how css3 realizes the fading effect of web pages". The explanation content in this article is simple and clear, easy to learn and understand. Please follow the ideas of Xiaobian slowly and deeply to study and learn "how css3 realizes the fading effect of web pages" together!

Methods: 1. Use the "body{animation: name time}" statement to bind animation to the body of the web page element;2. Use the "@keyframes name {0%{opacity:0;}}" statement to set the animation key frame of the web page fading in. The opacity attribute is used to set the transparency of the element.

Operating environment of this tutorial: Windows 10 system, CSS3 && HTML5 version, Dell G3 computer.

CSS3 How to achieve the fade-in effect of web pages

In css, you can use the animation attribute and @keyframes rule to achieve the effect of changing the width of the element animation, through the @keyframes rule, you can create animation.

Animation is created by gradually changing one CSS style to another. You can change the CSS style several times during the animation.

Specify the time at which the change occurs as a percentage, or through the keywords "from" and "to," equivalent to 0% and 100%. 0% is the start time of the animation and 100% is the end time of the animation. For best browser support, you should always define 0% and 100% selectors.

Animate actions using the opacity attribute. This property is used to set the transparency of the element.

The syntax for the animation attribute is as follows:

animation: name duration timing-function delay iteration-count direction;

Examples are as follows:

123body{animation:fadenum 10s;}@keyframes fadenum{ 0%{opacity: 0;}}

webpage elements

Output:

Thank you for reading, the above is "how to achieve the fade-in effect of css3 web page" content, after learning this article, I believe we have a deeper understanding of how to achieve the fade-in effect of css3 web page, the specific use of the situation also needs to be verified by practice. Here is, Xiaobian will push more articles related to knowledge points for everyone, welcome to pay attention!