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

Question

我需要在用户事件的 HTML/CSS 界面中链接两个动画（这里只需单击文档）。第一个动画正确启动，但是当我想重新启动第二个动画时没有任何动作？

我知道如果我删除 .rotaiotn 类并在超时后为元素放置其他动画类，第二个动画从元素的第一个位置开始。

我想知道是否存在从第一个动画之后的蓝球位置开始第二个动画的解决方案？

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>

jsfiddle上的示例代码

提前致谢。

Answer 1

只有一个问题，在 css 中：

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

不应该是：

.rotation2 {
   -webkit-animation: rotation2 3s linear;   /* <----- here, rotation2
   animation-fill-mode: forwards;
   -webkit-animation-fill-mode: forwards !important;
}

在js部分，为什么不使用elem.classList https://developer.mozilla.org/fr/docs/Web/API/Element/classList来操作css类属性。