js如何实现动画效果图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Animation</title>
    <style>
        @keyframes slideIn {
            from {
                transform: translateX(-100%);
            }
            to {
                transform: translateX(0);
            }
        }

        .box {
            width: 100px;
            height: 100px;
            background-color: red;
            animation: slideIn 2s ease-in-out infinite;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

<!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: blue;
            position: absolute;
            left: 0;
        }
    </style>
</head>
<body>
    <div class="box" id="box"></div>
    <script>
        const box = document.getElementById('box');
        let start;

        function step(timestamp) {
            if (!start) start = timestamp;
            const progress = timestamp - start;
            box.style.left = Math.min(progress / 10, 200) + 'px';
            if (progress < 2000) {
                requestAnimationFrame(step);
            }
        }

        requestAnimationFrame(step);
    </script>
</body>
</html>