CSSセレクターの :target にて開始したアニメーションを再度 :target にてアニメーションさせる方法

HTML

<a href="#id">id</a>
<div id="id"></div>

CSS

#id:target {
    animation:;
}
:has(:active) #id {
    animation-name: none;
}

一度 :target 状態になった要素は、もう一度ローカルリンクに遷移してもアニメーションは動作しない。

ローカルリンクがアクティブになるときに、一度アニメーションを消すことで、もう一度 :target のアニメーションを動作させる。