css - 追い風アニメーションの展示

Question

Tailwind でアニメーションを使用する方法を学習しようとしています。私が絶望的に​​作ろうとしているアニメーションは次のとおりです。

Entering: "duration-200 ease-out"
  From: "opacity-0 scale-95"
  To: "opacity-100 scale-100"
Leaving: "duration-100 ease-in"
  From: "opacity-100 scale-100"
  To: "opacity-0 scale-95"

私がアニメーション化しようとしている要素は次のとおりです。

 <div class="absolute top-0 inset-x-0 p-2 duration-200 ease-out transition transform origin-top-right">

このアニメーションは、表示されたらすぐに実行する必要があるため、何をすべきか正確にはわかりません。

<div class="absolute top-0 inset-x-0 p-2 duration-200 
ease-out transition transform origin-top-right" style="${this.showMenu ? '' : 'display:none'}">

ただし、これは実際にはアニメーション化された結果にはなりません。次に何を試すことができますか？