animation 애니메이션 이 끝 난 후 되 돌 리 는 함수

       addEventListener()     DIV     "animationstart", "animationiteration"   "animationend"   。
      

var x = document.getElementById("myDIV")
//    JavaScript     
function myFunction() {
    x.style.WebkitAnimation = "mymove 4s 2"; // Chrome, Safari   Opera   
    x.style.animation = "mymove 4s 2";
}
//  Chrome, Safari   Opera
x.addEventListener("webkitAnimationStart", myStartFunction);
x.addEventListener("webkitAnimationIteration", myIterationFunction);
x.addEventListener("webkitAnimationEnd", myEndFunction);
x.addEventListener("animationstart", myStartFunction);
x.addEventListener("animationiteration", myIterationFunction);
x.addEventListener("animationend", myEndFunction);
function myStartFunction() {
    this.innerHTML = "animationstart      -       ";
    this.style.backgroundColor = "pink";
}
function myIterationFunction() {
    this.innerHTML = "animationiteration      -       ";
    this.style.backgroundColor = "lightblue";
}
function myEndFunction() {
    this.innerHTML = "animationend      -       ";
    this.style.backgroundColor = "lightgray";
}

 const box=document.querySelector('.box');
                let value=0;
                const add=()=>{
                    requestAnimationFrame(add);
                    value+=5;
                    box.style.transform=`translateX(${value}px)`
                }
requestAnimationFrame(add);

function animate(start, end, time, callback) {
    let startTime = performance.now() //         
    console.log(performance.now())
    let differ = end - start //       
    //             
    function loop() {
        raf = requestAnimationFrame(loop) //                
        const passTime = performance.now() - startTime //             
        let per = passTime / time //          
        if (per >= 1) { //         
              per = 1 //         
              cancelAnimationFrame(raf) //     
        }
        const pass = differ * per //          *              
        callback(pass) //       ，       
    }
    let raf = requestAnimationFrame(loop) //                
}
let box = document.querySelector('.box');
animate(0, 400, 1000, value => {
    box.style.transform = `translateX(${value}px)` //             css    transform                  
})