CSSのみでdisplay:noneの要素をフェードイン/フェードアウトさせる方法

マウスオーバーやクリック時など、何らかの処理をしたタイミングで、
display: none;されている要素にアニメーション（フェードインなど）をつけたいことが多いのでメモ。

※-moz-や-webkit-は省略しているので、適宜つけてください。

@keyframes fadeIn {<