CSS 3 transition Effect of jquery Fadein, FadeOut

. div {  Visibility:hidden;  opacity:0;  transition:visibility 0s linear 0.5s,opacity 0.5s linear;}. div:hover {  visibility:visible;  opacity:0.5;  transition-delay:0s;}

In jquery, simply call $ (' xx '). FadeIn (), you can complete the effect on element, but I want to use CSS3 to complete the can? Of course!

We will use the above code to finish the fade, but we don't need to be in such trouble now.

div {  Visibility:hidden;  opacity:0;  Transition:all 0.5s Linear;} div:hover {  visibility:visible;  opacity:0.5; }

This is much simpler, do not need to know so much, in the CSS to explain in the hover, give the effect, there is transition to declare the transition can be

Details and principles

In the modern browser, just give Div a transition to be able to, when hover, Div:hover also has the transition effect.

If you're asking for a 2-second stop at hover, you can just finish the effect when you leave, which also

div {  Visibility:hidden;  opacity:0;  Transition:all 0.5s Linear;} div:hover {  visibility:visible;  Transition:all 0.5s linear 2s; }

When moving points on element, the CSS of div hover will be used directly, and leaving will use the original CSS. If hover does not have a transition CSS, it will use the DIV's transition css.

CSS 3 transition Effect of jquery Fadein, FadeOut