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

This article mainly introduces "what is the difference between the animation effect of display and visibility participation". In daily operation, I believe many people have doubts about what is the difference between the animation effect of display and visibility participation. I have consulted all kinds of materials and sorted out simple and easy operation methods. I hope to help you answer the question of "what is the difference between the animation effect of display and visibility participation"! Next, please follow the small series to learn together!

Display and visibility participate in different animation effects

display:none Participating animation effects are ones that do not produce transition animation,

Even if you set the transition time.

visibility: hidden Participating animations will produce transition effects;

Because visibility is one of the attributes supported by css3 for transition;

Unfortunately, there is no support for display.

3.1 Excessive effects of using display: none on animation

The following code uses display: none;

Although the animation effect is set

But it showed up right away.

Show it, show it.

I don't have animation

.son{

opacity: 0;

transition: opacity 5s;

display: none;

}

.box:hover .son{

display: block;

opacity: 1;

}

At this point, the study of "what is the difference between the animation effect of display and visibility participation" is over, hoping to solve everyone's doubts. Theory and practice can better match to help everyone learn, go and try it! If you want to continue learning more relevant knowledge, please continue to pay attention to the website, Xiaobian will continue to strive to bring more practical articles for everyone!

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.