如何在第一个动画CSS的位置启动第二个动画CSS?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (161)

我需要链接两个动画在我的界面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>
提问于
用户回答回答于

在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;
}

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励