display:none→display:blockでふわっと出現させたい

タイトル通り
display:noneで非表示にしていたものを
display:blockで表示させるのに、そのままではなく
ふわっとフェードインさせようと思いましたが

display:noneにはtransitionプロパティが使えないのですね
知らなかった…

この場合
opacity:0→opacity:1　だと
transition が使えるのですが

opacityは要素が透明なだけでそこにある
つまり空間は存在します
今回、それだと具合が悪く
やっぱり完全に非表示にしたかったので…

調べたところkeyframeを使うのが良いんだそうです

CSS

例：boxにカーソルを重ねたときに子要素のulが出るようにしたい

/*10px上方からふわっと下に降りてくる*/
@keyframes fuwaMenu {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0px);
  }
}	
	
.box ul{
	display: none;
}
.box:hover ul{
	display: block;
	animation: fuwaMenu 0.3s linear 0s;
	}

これでうまくいきました！

参考：あれこれ調べましたがこちらのページを特に参考にさせてもらいました(^o^)　ありがとうございました！