动画和过渡样式如何级联

Question

根据MDN， 级联顺序如下所示： 我们可以看到过渡样式优先于动画样式。但在我的例子中它不起作用：

div {
  width      : 200px;
  height     : 200px;
  background : red;
  animation  : rota 2s linear forwards infinite;
  transition : transform 40s linear;
  }
div:hover {
  background : green;
  transform  : translateX(1000px) !important;
  }
@keyframes rota {
  100% { transform: rotateZ(360deg); }
  }

<div></div>

我希望 div 在悬停时缓慢向右移动，因为过渡样式应该覆盖关键帧中的变换属性。但行为却非常不一致，动画样式通常优先，而过渡样式未完全应用。