如何在每次页面刷新/加载时进行“循环一次”动画GIF背景播放？

<style>
    body {
        background-image: url('your-animation.gif');
        background-repeat: no-repeat;
        background-size: cover;
    }
</style>

<script>
    function playAnimation() {
        // 获取背景元素
        var body = document.getElementsByTagName('body')[0];
        
        // 添加CSS类来启动动画
        body.classList.add('play');
        
        // 在一定时间后移除CSS类，停止动画
        setTimeout(function() {
            body.classList.remove('play');
        }, 5000); // 5000毫秒后停止动画，可以根据需要调整时间
    }
    
    // 在页面加载完成后调用播放动画函数
    window.onload = playAnimation;
</script>

<style>
    @keyframes play {
        0% {
            background-position: 0 0;
        }
        100% {
            background-position: -1000px 0; /* 根据动画GIF的尺寸调整数值 */
        }
    }
    
    .play {
        animation: play 5s infinite; /* 5秒循环一次，可以根据需要调整时间 */
    }
</style>