js控制animation动画效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Animation</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: red;
            position: relative;
        }
        @keyframes move {
            from { left: 0; }
            to { left: 200px; }
        }
    </style>
</head>
<body>
    <div class="box" id="box"></div>
    <button onclick="startAnimation()">Start Animation</button>

    <script>
        function startAnimation() {
            const box = document.getElementById('box');
            box.style.animation = 'move 2s linear infinite';
        }
    </script>
</body>
</html>

function animate() {
    // 动画逻辑
    requestAnimationFrame(animate);
}
requestAnimationFrame(animate);

function startAnimation() {
    const box = document.getElementById('box');
    box.style.animation = 'move 2s linear forwards';
    setTimeout(() => {
        box.style.animation = '';
    }, 2000);
}