问在第一个动画css的位置开始第二个动画css

EN

document.addEventListener('click', startAnimation, false);
var isFisrtAnim = false;

function startAnimation(evt) {
   var elt = document.querySelector('#blue_ball');
   if (!isFisrtAnim) {
      elt.setAttribute('class', 'rotation');
   } else {
      elt.setAttribute('class', 'rotation2');
   }
   elt.addEventListener("animationend", animationAtEnd, false);
}

function animationAtEnd(evt) {
   evt.preventDefault();
   isFisrtAnim = !isFisrtAnim;
   var elt = evt.target;
   // todo here get new position of elt to start another animation
   // from the new position after first animation
   var new_margin_top = window.getComputedStyle(elt).getPropertyValue('margin-top');
   var new_margin_left = window.getComputedStyle(elt).getPropertyValue('margin-left');
   console.log('At end new margin-top : ' + new_margin_top + ' - new margin-left : ' + new_margin_left);
   // positions are the same of start element ? they are not modify ?
}

#circleNav {
   background: rgba(215, 229, 231, 0.4) !important;
   margin-top: 100px;
   margin-left: 120px;
   border-radius: 50%;
   width: 335px;
   height: 335px;
   border: 2px solid #0e6694;
}

img {
   max-width: 100%;
}

#blue_ball {
   position: absolute;
   margin-top: -350px;
   margin-left: 165px;
   width: 70px;
   height: 70px;
   border: none;
   z-index: 5;
   transform-origin: 120px 180px;
}

.rotation {
   -webkit-animation: rotation 3s linear;
   animation-fill-mode: forwards;
   -webkit-animation-fill-mode: forwards !important;
}

@-webkit-keyframes rotation {
   from {
      -webkit-transform: rotate(0deg);
   }
   to {
      -webkit-transform: rotate(240deg);
   }
}

.rotation2 {
   -webkit-animation: rotation 3s linear;
   animation-fill-mode: forwards;
   -webkit-animation-fill-mode: forwards !important;
}

@-webkit-keyframes rotation2 {
   from {
      -webkit-transform: rotate(240deg);
   }
   to {
      -webkit-transform: rotate(360deg);
   }
}    

<h2>
   CLICK ON THE BODY TO START ANIMATION
</h2>
<h4>
   When the Blue ball stop click an other time to start second animation, but don't work ?

</h4>
<div id="circleNav"></div>
<div id="blue_ball">
   <a href="#">
            <img id="btn_menu" src="http://mascaron.net/img/mini_rond_logo.png">
        </a>
</div>