後続のクラスが要素に追加されるたびに CSS アニメーションを実行する方法

Question

CSS アニメーション クラスを設定して、

要素をアニメーション化できるようにしました。

入力ボタンをクリックすると、

にこのクラスが追加されるので、例では入力ボタンをクリックするたびに

が画面に飛ぶようにしたいと思います。

ただし、これは初回のみ機能し、それ以降の入力クリックでは要素はアニメーション化されません。ここで何が足りないのでしょうか？

リーリー リーリー リーリー

Answer 1

新しいイベント リスナーを animationend イベントに追加して、プロパティ
animation-name を none

にリセットする必要があります。

次のコードのようになります:

リーリー