@starting-style で初期値（opacity: 0, scale: 0.85）を定義し、transition-behavior: allow-discrete で display のトランジションを有効化しています。
@starting-style はページ読み込み時にも機能します。各カードに transition-delay を設定して、順番にフェードインさせています。ページをリロードすると再度アニメーションが見られます。
GPUアクセラレーション対応
CSSだけで自在にコントロール
prefers-reduced-motion対応
ライブラリ不要、CSSネイティブ
HTML の popover 属性は内部的に display: none で制御されるため、@starting-style との相性が抜群です。開閉ともにスムーズなアニメーションが付きます。
@starting-style × popover
このポップオーバーは開くときにスケールアップしながらフェードイン、閉じるときはその逆のアニメーションが適用されます。
overlay のトランジションも含めて、トップレイヤーからの退出もスムーズです。
@starting-style は要素がDOMに挿入されるたびに発火します。リストに項目を追加すると、左からスライドインします。