js怎么实现动画效果

function animate(element, target, duration) {
    let start = null;
    const initial = parseFloat(getComputedStyle(element)[target]);
    
    function step(timestamp) {
        if (!start) start = timestamp;
        const progress = timestamp - start;
        const percentage = Math.min(progress / duration, 1);
        element.style[target] = initial + (target === 'opacity' ? percentage : percentage * 100) + '%';
        
        if (progress < duration) {
            window.requestAnimationFrame(step);
        }
    }
    
    window.requestAnimationFrame(step);
}

// 使用示例
const box = document.getElementById('box');
animate(box, 'left', 2000); // 将元素向左移动2000px

/* CSS */
#box {
    width: 100px;
    height: 100px;
    background-color: red;
    transition: left 2s;
}

// JavaScript
document.getElementById('box').style.left = '200px';

function animate() {
    // 更新动画状态
    requestAnimationFrame(animate);
}

requestAnimationFrame(animate);