如何在访问超链接后停止该链接上的CSS动画？

<a href="#" onclick="stopAnimation()">点击停止动画</a>

<style>
    @keyframes exampleAnimation {
        from { /* 起始样式 */ }
        to { /* 结束样式 */ }
    }

    .animated-link {
        animation: exampleAnimation 2s infinite; /* CSS动画属性 */
    }

    .stop-animation {
        animation-play-state: paused; /* 设置动画暂停 */
    }
</style>

<script>
    function stopAnimation() {
        var link = document.querySelector('.animated-link');
        link.classList.add('stop-animation');
    }
</script>

<style>
    @keyframes exampleAnimation {
        from { /* 起始样式 */ }
        to { /* 结束样式 */ }
    }

    .animated-link {
        animation: exampleAnimation 2s infinite; /* CSS动画属性 */
    }

    .animated-link:visited {
        animation-play-state: paused; /* 设置动画暂停 */
    }
</style>

<a href="#" class="animated-link">访问后停止动画</a>