Shulou(Shulou.com)06/02 Report--

This article mainly explains "how css makes div appear gradually". The content in the article is simple and clear, easy to learn and understand. Please follow the editor's train of thought to study and learn "how css makes div appear gradually".

Methods: 1, use the animation attribute to bind the animation to the div element; 2, use the "@ keyframes" rule to control the animation action to achieve a gradual effect, and the syntax is "@ keyframes animation name {0% {opacity:0} 100% {opacity:1}}".

The operating environment of this tutorial: windows10 system, CSS3&&HTML5 version, Dell G3 computer.

How css makes div appear gradually

In css, you can use the animation attribute and the @ keyframes rule to animate the real and hidden elements, and with the @ keyframes rule, you can create animation.

The principle of creating animation is to gradually change one set of CSS styles into another. You can change this CSS style many times during the animation process.

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

The syntax is:

@ keyframes animationname {keyframes-selector {css-styles;}}

Among them

The syntax for the animation attribute is:

Animation: name duration timing-function delay iteration-count direction

Where:

Examples are as follows:

Css3 shows the hiding effect .fadenum {background-color: # ffce44;width: 150pxposition height: 150pxposition animation virtual fadenum 5s 1;} @ keyframes fadenum {0% {opacity: 0;} 100% {opacity: 1;}}

Output result:

Thank you for your reading, the above is the content of "how css makes div appear gradually". After the study of this article, I believe you have a deeper understanding of how css makes div gradually appear, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.