<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/13034/spacecat.svg" class ="space-cat" alt="">
body {
  background: rgb(10, 7, 81) url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/13034/space_back.svg');
  margin: 3em 1em;
}

.space-cat {
   width: 200px;
}

.wrap {
  width: 90%;
  margin: auto;
}

#space-cat-move {
  width: 100%;
}

const cat = document.querySelector('.space-cat'),
      width = window.innerWidth;

var currentTime, //current time into the progression of the animation
    startValue, //the begining value of property that is animating
    changeInValue, //the change between the start and destination value
    totalTime; // the total time of the animation

// we'll use iterations to keep track of the animation's progression
var currentIteration = 0,
    totalIterations = 0;

//calculate our total iterations based on 60fps
totalTime = 2; //in seconds
totalIterations = totalTime * 60; //runs 60 times a second*

startValue = 0;
endValue = 800;
changeInValue = endValue - startValue;

const moveCat = () => {
  if (currentIteration < totalIterations) {
    var progress = currentIteration / totalIterations
    currentValue = changeInValue * progress + startValue
    cat.style.transform = `translate3d(${currentValue}px, 0, 0)`
    currentIteration++
  } else {
    currentIteration = currentIteration
  }

  requestAnimationFrame(moveCat)
}

moveCat()

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.