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

This article mainly explains "css how to achieve the gradual hiding effect of the picture", the content of the article is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in depth, together to study and learn "css how to achieve the gradual hiding effect of the picture" bar!

Method: 1, use the animation attribute to bind the animation to the picture element; 2, use the "@ keyframes" rule to control the animation action to achieve the gradually hiding effect, and the syntax is "@ keyframes animation name {0% {opacity:1} 100% {opacity:0}}".

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

How to realize the gradual hiding effect of pictures by css

In css, you can use the animation attribute and the @ keyframes rule to animate the fading 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 for the animation attribute is as follows:

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

Among them

The syntax for @ keyframes rule is as follows:

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

Among them

Examples are as follows:

Css3 shows hidden effect img {animation:fadenum 5s 1;} @ keyframes fadenum {0% {opacity: 1;} 100% {opacity: 0;}}

Output result:

Thank you for your reading, the above is the content of "css how to achieve the gradual hiding effect of pictures". After the study of this article, I believe you have a deeper understanding of how css realizes the gradual hiding effect of pictures, 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.