js中的动画效果怎么做

function animate() {
    // 更新元素的位置或其他属性
    let element = document.getElementById('myElement');
    let start = null;
    const duration = 2000; // 动画持续时间

    function step(timestamp) {
        if (!start) start = timestamp;
        const progress = timestamp - start;
        element.style.transform = `translateX(${Math.min(progress / 10, 200)}px)`;
        if (progress < duration) {
            window.requestAnimationFrame(animate);
        }
    }

    window.requestAnimationFrame(animate);
}

animate();

function animate() {
    let element = document.getElementById('myElement');
    let start = null;
    const duration = 2000; // 动画持续时间

    function step(timestamp) {
        if (!start) start = timestamp;
        const progress = timestamp - start;
        element.style.transform = `translateX(${Math.min(progress / 10, 200)}px)`;
        if (progress < duration) {
            window.requestAnimationFrame(animate);
        }
    }

    window.requestAnimationFrame(animate);
}

animate();

/* CSS */
@keyframes slideIn {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
}

.animated-element {
    animation: slideIn 2s forwards;
}

// JavaScript
let element = document.getElementById('myElement');
element.classList.add('animated-element');