Material Designで紹介されていた、閉じるアニメーションを短くするやつのCSS実装方法(JS使わない)

Material Designのアニメーションに関する記事が面白いので見ていたところ、

Exit transitions may be faster because they require less attention than the user’s next task.

終了遷移は、ユーザーの次のタスクよりも注意を払う必要がないため、高速になる場合があります。

とのこと。フムフムこれはどっかで使えそう。
しかし、JavaScriptを使わない場合、どう実装するのがいいだろう？
少し考えた末、以下のように実装してみた。

See the Pen Untitled by ujiro99 (@ujiro99) on CodePen.

至極単純だが、アニメーションのトリガーとなる擬似クラスと通常の状態とで、異なるtransition-durationを指定すれば良い。ここでは、以下のように指定している。

  1. hover擬似クラス有り -> 開始遷移のゆったりしたduration(300ms)
  2. 通常の状態        -> 終了遷移の早いduration(200ms)

これで、「ふわっと表示されてシュッと消える」ようなアニメーションができる。

他にもっといいやり方あるかな？
ちなみにJavaScriptを使う場合は、いわゆるenterとleaveでdurationを変更すれば良さそう。