OSX のメニュー風にフェードアウトさせながら要素を非表示にする

普段あまり気にしないけど、 OSX のメニューは、表示されるときはアニメーションなしで、非表示になるときはフェードアウトしながら消える。

Web 上でもこの雰囲気を再現したくて、 CSS transition でやってみようと思ったんだけど、以下のコードだとアニメーションしない。

.menu {
    transition: none;

    &.hidden {
      display: none;
      opacity: 0;

      transition:
        display 0s linear 0.3s,
        opacity 0.3s ease 0s;
    }
}

実は display プロパティは transition に指定できないので、代わりに visibility を使ってやる必要がある。

.menu {
    transition: none;

    &.hidden {
      visibility: hidden;
      opacity: 0;

      transition:
        visibility 0s linear 0.3s,
        opacity 0.3s ease 0s;
    }
}