Is there a CSS-only (pure CSS) workaround to apply fade-in and fade-out on objects with display:none?

Question

I know the effect can be easily achieved with jQuery hide(). The goal here is to do it with pure CSS instead. The fade-out result must have display:none so the element takes up zero space on the page layout (so visibility:hidden isn't an option).

I got success on made a fade-in effect with pure CSS on the display:none object using a piece of animation instead of transition, but I couldn't make it work on fade-out without to use the javascript setTimeout method.

Here's what I got so far:

function aaa(){
document.getElementById("b").style.display = "inline-block";  
}

function bbb(){
setTimeout(function(){ document.getElementById("b").style.display = "none"; }, 1000);   
}

#b {
  display: none;
  opacity: 0;
  -webkit-transition: all 1s; /* Safari */
  transition: all 1s;
  background: skyblue;
}

#a:hover ~ #b {
  opacity: 1;
  -webkit-animation: animate 1s; /* Chrome, Safari, Opera */ 
  animation: animate 1s;
}

@keyframes animate {
    0%   {opacity: 0;}
    100% {opacity: 1;}
}

div {
  width: 58px;
  height: 58px;
  vertical-align: middle;
  border: 1px solid black;
  line-height: 58px;
  text-align: center;
}

#a {
  background: tomato;  
}

#c {
  background: greenyellow;  
}

<div id=a onmouseenter="aaa()" onmouseleave="bbb()">OVER</div>
<div id=b>B</div>
<div id=c>C</div>

Is it possible to reach this same result using zero javascript?

codepen DEMO

Answer 1

As you can't animate display: none with CSS only, here is an alternative using height

#b {
  height:0;
  transition: 1s;
  overflow: hidden;
  background: skyblue;
}

#a:hover ~ #b {
  height: 58px;
}

div {
  width: 58px;
  height: 58px;
  vertical-align: middle;
  border: 1px solid black;
  line-height: 58px;
  text-align: center;
}

#a {
  background: tomato;  
}

#c {
  background: greenyellow;  
}

<div id=a>OVER</div>
<div id=b>B</div>
<div id=c>C</div>

If you need height: auto, you can use max-height like this

#b {
  max-height:0;
  padding: 0px 0;
  transition: 0.5s ease-in-out;
  overflow: hidden;
  background: skyblue;
}

#a:hover ~ #b {
  max-height: 150px;
  padding: 20px 0;
  transition: 0.8s ease-in-out;
}

div {
  width: 58px;
  height: auto;
  padding: 20px 0;
  vertical-align: middle;
  border: 1px solid black;
  text-align: center;
}

#a {
  background: tomato;  
}

#c {
  background: greenyellow;  
}

<div id=a>OVER</div>
<div id=b>B</div>
<div id=c>C</div>