The realization of pure CSS fade

The objective is to achieve a mouse hover A node B fade in pure CSS, B fade when removed from the A function, hope B will not display when not occupying and event free (usually display:none), hence the difficulty.

The following is the structure of DOM

<div id="container"></div>

<div id="detail"></div>


Transition does not support the display attribute changes, and the browser will change the attribute of the node together with display display, which may lead to the failure of the animation effect

#container{width:100px;

height:100px;

background-color: red;

display:block;

}

#container + #detail{

width:10px;

height:10px;

position:absolute;

background-color:#666;

top:15px;

left:15px;

opacity:0;

transition:all 0.4s;

display: none;

}

#container:hover + #detail,#detail:hover{

opacity:1;

display: block;

}

Fade in fade out completed, but not, this is because the detail node is not occupied.

#container{width:100px;

height:100px;

background-color: red;

display:block;

}

#container + #detail{

width:10px;

height:10px;

position:absolute;

background-color:#666;

top:15px;

left:15px;

opacity:0;

-webkit-animation:hide 0.4s ease-out;

display: none;

}

#container:hover + #detail,#detail:hover{

opacity:1;

display: block;

-webkit-animation:show 0.4s ease-in;

transition-delay: 0s;

}

@-webkit-keyframes show /* Safari and Chrome */

{

0% {opacity:0;}

100% {opacity:1;}

}

@-webkit-keyframes hide /* Safari and Chrome */

{

0% {opacity:1;}

100% {opacity:0;}

}

The final realization of the code (only written under chrome)

#container{width:100px;

height:100px;

background-color: red;

display:block;

}

#detail{

width:10px;

height:0px;

position:absolute;

background-color:#666;

top:15px;

left:15px;

opacity:0;

-webkit-animation:hide 0.4s ease-out;

display: block;

transition:height 1ms;

transition-delay: 0.4s;

overflow:hidden;

}

#container:hover + #detail{

height:10px;

opacity:1;

display: block;

-webkit-animation:show 0.4s ease-in;

transition-delay: 0s;

}

#detail:hover{

height:10px;

opacity:1;

display: block;

-webkit-animation:show 0.4s ease-in;

transition-delay: 0s;

}

@-webkit-keyframes show 

{

0% {opacity:0;}

100% {opacity:1;}

}

@-webkit-keyframes hide 

{

0% {opacity:1;}

100% {opacity:0;}

}




Posted by Cassandra at November 17, 2013 - 5:44 AM