如何在动画结束时旋转图标？

<style>
    .rotate-animation {
        animation-name: rotate;
        animation-duration: 1s;
        animation-timing-function: linear;
        animation-fill-mode: forwards;
    }

    @keyframes rotate {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }
</style>

<div class="rotate-animation">图标</div>

const iconElement = document.querySelector('.rotate-animation');

iconElement.addEventListener('animationend', () => {
    iconElement.classList.remove('rotate-animation');
});