反向后退动画不适用于mouseout事件

Question

我尝试在mouseover事件（工作正常）和具有reverse和backwards属性的相同动画上应用动画，以便在{{1}上播放}。但第二部分不能正常工作。最后，我希望动画在mouseleave向前播放，在mouseover向后播放。如果有一种方法可以从那一点开始应用下一个动画，那么请将其包含在你的答案中。这是我的代码：

＆＃13;

＆＃13;

mouseleave

＆＃13;

const target = document.getElementById("animated");
target.addEventListener("mouseover", animateForward);
target.addEventListener("mouseout", animateBackward);

function animateForward() {
  target.style.animation = 'custom 1.6s forwards';
}

function animateBackward() {
  target.style.animation = 'custom 1.6s reverse backwards';
}

＆＃13;

/* Safari 4.0 - 8.0 */
@-webkit-keyframes custom {
    25% {
      border-radius: 50% 0 0 0;
    }
    
    50% {
      border-radius: 50% 50% 0 0;
    }
    
    75% {
      border-radius: 50% 50% 50% 0;
    }
    
    100% {
      border-radius: 50% 50% 50% 50%;
      background-color: violet;
    }
} 

/* Standard syntax */ 
@keyframes custom {
    25% {
      border-radius: 50% 0 0 0;
    }
    
    50% {
      border-radius: 50% 50% 0 0;
    }
    
    75% {
      border-radius: 50% 50% 50% 0;
    }
    
    100% {
      border-radius: 50% 50% 50% 50%;
      background-color: violet;
      
      -moz-transform: rotate(180deg);  
      -webkit-transform: rotate(180deg);  
      -o-transform: rotate(180deg);  
      -ms-transform: rotate(180deg); 
      transform: rotate(180deg);
    }
}

div {
  border: 1px black solid;
  width: 100px;
  height: 100px;
  margin: 50px;
}

＆＃13;

＆＃13;

＆＃13;

这是JsFiddle。

Answer 1

对于仅限CSS的解决方案，请退出@keyframes，然后使用transitions。在处理:hover时，过渡几乎总是你真正需要的。

例如，动画的所有属性都可以独立设置，因此它们可以有自己的转换规则。

因此，您的动画可以通过以下转换进行转换，其中每个关键帧已被三重奏transition-property - transtion-duration - transition-delay替换。

＆＃13;

＆＃13;

div {
  border: 1px black solid;
  width: 100px;
  height: 100px;
  margin: 50px;
  /* define all the props */
  transition-property: 
    transform,
    background-color,
    border-top-left-radius,
    border-top-right-radius,
    border-bottom-right-radius,
    border-bottom-left-radius;
 /* set their duration independently */
 transition-duration: 1.6s, 1.6s, 0.4s, 0.4s, 0.4s, 0.4s;
 /* same for delays */
 transition-delay: 0s, 0s, 0s, 0.4s, 0.8s, 1.2s;
}
div:hover{
  border-radius: 50%;
  background-color: violet;
  transform: rotate(180deg);
  }

＆＃13;

<div id="animated"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您需要使用animation-iteration-count来解决此问题：

const target = document.getElementById("animated");
target.addEventListener("mouseover", animateForward);
target.addEventListener("mouseout", animateBackward);

function animateForward() {
	target.style.animation = '';
  setTimeout(function() {
    target.style.animation = 'custom 1.6s forwards';
    target.style.animationIterationCount = '1';
  }, 0)
}

function animateBackward() {
  target.style.animation = 'custom 1.6s reverse backwards';
  target.style.animationIterationCount = '2';
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes custom {
    25% {
      border-radius: 50% 0 0 0;
    }
    
    50% {
      border-radius: 50% 50% 0 0;
    }
    
    75% {
      border-radius: 50% 50% 50% 0;
    }
    
    100% {
      border-radius: 50% 50% 50% 50%;
      background-color: violet;
    }
} 

/* Standard syntax */ 
@keyframes custom {
    25% {
      border-radius: 50% 0 0 0;
    }
    
    50% {
      border-radius: 50% 50% 0 0;
    }
    
    75% {
      border-radius: 50% 50% 50% 0;
    }
    
    100% {
      border-radius: 50% 50% 50% 50%;
      background-color: violet;
      
      -moz-transform: rotate(180deg);  
      -webkit-transform: rotate(180deg);  
      -o-transform: rotate(180deg);  
      -ms-transform: rotate(180deg); 
      transform: rotate(180deg);
    }
}

div {
  border: 1px black solid;
  width: 100px;
  height: 100px;
  margin: 50px;
}

<div id="animated"></div>