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

This article mainly explains "css how to achieve element display and hidden animation effects", 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 element display and hidden animation effects" bar!

Methods: 1, use the animation attribute to bind the element animation; 2, use the "keyframes" rule to control the animation action to achieve the display hidden effect, the syntax "@ keyframes animation name {0% {opacity:1} 50% {opacity:0} 100% {opacity:1}}".

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

How to realize element display and Hidden Animation effect by css

We can use the @ keyframes rule to animate elements real and hidden, 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;}}

Where:

Examples are as follows:

Css3 shows the hiding effect .fadenum {background-color: # ffce44;width: 150pxposition height: 150pxposition animation virtual fadenum 3s infinite;} @ keyframes fadenum {/ * setting content changes from showing to hiding * / 0% {opacity: 1;} 50% {opacity: 0;} 100% {opacity: 1;}}

Output result:

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