Chrome vs Firefox从动画到非动画的过渡

Question

Firefox有一个很好的行为，当在一个启用过渡的元素中关闭动画时，它会把元素带到它所在的地方，并切换回原始形式。

在Chrome中，它只是跳转而不过渡。

为什么不一致?有没有办法复制在Chrome不使用太多的JS?

.wrapper {
  width: 400px;
  height: 200px;
}
.move {
  width: 100px;
  height: 100px;
  position: absolute;
  background-color: #f66;
  transition: 1s;
  cursor: pointer;
}
.move {
  animation: move 2s linear infinite;
}
.wrapper:hover .move {
  animation: none;
}
@keyframes move {
  50% {
    transform: translateX(200px);
  }
}

<div class="wrapper">
    <div class="move"></div>
</div>

Answer 1

$(".spinny").bind("webkitAnimationEnd mozAnimationEnd animationEnd", function(){
  $(this).removeClass("spin")  
})
$(".spinny").hover(function(){
  $(this).addClass("spin");        
})

div {
  width: 100px;
  height: 100px;
  background-color: #f66;
  transition: 1s;
  cursor: pointer;
}
.spin {
  animation: spin 1s linear 1;
}
@keyframes spin {
  100% {
    transform: rotate(180deg);
  }
}

<script src="https://code.jquery.com/jquery-3.1.0.js"></script><div class="spinny"></div>

根据这个答案，JS可以分别用于在悬停和动画结束时添加和删除类。本例中使用了jQuery，但它不是实现该功能所必需的。

EDIT:现在没有jQuery，这将通过记住状态并在每个动画结束后检查每次悬停时播放动画。

hover = 0;
s = document.getElementById("spinny");
s.addEventListener("animationend", function(){
  s.className = "";
  if (hover)
    setTimeout(function(){s.className = "spin"},0);
})
s.onmouseover = function(){
  s.className = "spin";
  hover = 1;
}
s.onmouseout = function(){
  hover = 0;
}

div {
  width: 100px;
  height: 100px;
  background-color: #f66;
  transition: 1s;
  cursor: pointer;
}
.spin {
  animation: spin 1s linear 1;
}
@keyframes spin {
  100% {
    transform: rotate(180deg);
  }
}

<div id="spinny"></div>

Answer 2

添加转换

.rotate {
  width: 200px;
  height: 200px;
  transform: rotate(0deg);
  transition: 0.5s ease all;
  background-color: #222;
  }
.rotate:hover {
  transform: rotate(20deg);
  transition: 0.5s ease all;
  }