Реализация плавной анимации чистый JS+CSS

cop_body.onmouseover =function(){           
        star_icon.style.marginLeft= '35px';//шаг 1       
        star_icon.style.marginLeft='54px' ;//шаг 2
        star_icon.style.marginLeft='81px' ;//шаг 3
        star_icon.style.marginLeft='108px' ;//шаг 4
        star_icon.style.marginLeft='130px' ;//шаг 5
        star_icon.style.marginLeft='160px';//шаг 6
        star_icon.style.marginLeft='178px'; //шаг 7

var cop_body = document.getElementById('cop_body');
 
var margin = 'marginLeft';
var duration = 'transitionDuration';
 
var initStyles = [      
  {
    key: duration,
    value: '0s'
  },
  {
    key: margin,
    value: '0px'
  }
];
 
var steps = [
 {                              // step 1
   beforeDelay: 1000,
   styles: [
     {
       key: duration,
       value: '1s'
     },
     {
       key: margin,
       value: '35px'
     }
   ]
 },
 {                              // step 2
   beforeDelay: 1000,
   styles: [
     {
       key: duration,
       value: '0.5s'
     },
     {
       key: margin,
       value: '100px'
     }
   ]
 },
 {                              // step 3
   beforeDelay: 3000,
   styles: [
     {
       key: duration,
       value: '2s'
     },
     {
       key: margin,
       value: '200px'
     }
   ]
 }
];
 
function detectTransitionEvent(){
    var t;
    var el = document.createElement('fakeelement');
    var transitions = {
      'transition':'transitionend',
      'OTransition':'oTransitionEnd',
      'MozTransition':'transitionend',
      'WebkitTransition':'webkitTransitionEnd'
    }
 
    for(t in transitions){
        if( el.style[t] !== undefined ){
            return transitions[t];
        }
    }
};
 
var isInProcess = false;
cop_body.onmouseover = function () { 
    var stepIndex = 0;
  if (!isInProcess) {
    var star_icon = document.getElementById('star_icon');
    applyStyles(star_icon, initStyles);
    isInProcess = true;
    var transitionEvent = detectTransitionEvent();
    var length = steps.length;
    if (transitionEvent && length) {
        var handleAnimationEnd = function(e) {
      $this = e.target;
      if (++stepIndex == length) {
            console.log('end');
            isInProcess = false;
            stepIndex = 0;
            $this.removeEventListener($this, handleAnimationEnd);
            return false;
          } else {
          setTimeout(function () {
            applyStyles($this, steps[stepIndex].styles);          
          }, steps[stepIndex].beforeDelay || 0);
        }
      }
    
      star_icon.addEventListener(transitionEvent, handleAnimationEnd);
      
      setTimeout(function () {
        applyStyles(star_icon, steps[stepIndex].styles);
      }, steps[stepIndex].beforeDelay || 0);
    }
  }
}
    
function applyStyles (element, styles) {
    Object.keys(styles).forEach(function(styleArrayIndex) {
    element.style[styles[styleArrayIndex].key] = styles[styleArrayIndex].value;
  });
}