是否有仅使用CSS(纯CSS)的解决方法,以使用display：none在对象上应用淡入和淡出？

我知道使用jQuery hide()可以轻松实现效果.这里的目标是用纯CSS代替它.淡出结果必须具有display：none,因此元素占用页面布局上的零空间(因此visibility：hidden不是一个选项).

我成功地在显示器上使用纯CSS制作了淡入效果：没有使用动画而不是过渡的对象,但是如果不使用javascript setTimeout方法,我就无法使其淡出效果.

这是我到目前为止所得到的：

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>

是否有可能使用零javascript达到相同的结果？

codepen DEMO

解决方法

因为你无法使用CSS动画显示：none,所以这是使用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>

如果你需要身高：自动,你可以像这样使用max-height

#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>