How to realize the disappearance Animation in a few seconds by css3
This article mainly introduces how css3 to achieve the disappearance of animation in a few seconds, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor with you to understand.
Method: 1. Use @ keyframes name {99% {opacity:1;} 100% {opacity:0;}} statement to animate the element's disappearance; 2, use the element {animation-duration: time} statement to set the animation time of the animated element, and the element will disappear after time.
The operating environment of this tutorial: windows10 system, CSS3&&HTML5 version, Dell G3 computer.
In css, to achieve an animation that disappears after a few seconds, you need to use the animation property and the @ keyframes rule to achieve the effect that the picture disappears after a few seconds. With the @ keyframes rule, you can create an 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 element disappearance style is controlled by using the opacity attribute.
Examples are as follows:
Document div {width:150px; height:100px; opacity:0; background-color:red; animation-name:fadenum; animation-duration:3s;} @ keyframes fadenum {0% {opacity:1;} 99% {opacity:1;} 100% {opacity:0;}}
Output result:
Thank you for reading this article carefully. I hope the article "how css3 disappears in a few seconds" shared by the editor will be helpful to everyone. At the same time, I also hope you can support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!
