原因：

由于以下原因，当您将鼠标移出元素时，slide-up动画将再次执行：

• 加载时，元素只有一个动画（slide-up）。浏览器执行此动画。
• 在悬停时，animation属性再次只指定一个动画（即rotate）。这会使浏览器从元素中删除slide-up动画。删除动画也会使浏览器忘记它的执行状态或执行计数。
• 当鼠标悬停出来时，默认的div选择器将适用于该元素，因此浏览器再次删除rotate动画并附加slide-up动画。由于它正在被重新附加，浏览器认为它必须再次执行它。
  解决方案：

您可以通过确保动画实际上永远不会从元素中删除***（即使:hover打开且animation-iteration-count为1），使上滑动画仅运行一次。
在下面的代码片段中，你会注意到我是如何在:hover选择器中保留slide-up动画定义的，这使得浏览器看到这个动画，因为这个动画已经在加载时执行过一次，所以它不会再执行一次（因为迭代计数）。
（*注意：****为了避免混淆，animation-iteration-count的默认值是1，但为了解释起见，我将其显式化。这不是主要原因，只是一个额外的步骤，以确保其值不会搞乱解决方案。）

div {
  height: 100px;
  width: 100px;
  border: 1px solid;
  animation: slide-up 2s 1;
}
div:hover {
  animation: slide-up 2s 1, rotate 2s forwards;
}
@keyframes slide-up {
  from {
    margin-top: 100px;
  }
  to {
    margin-top: 0px;
  }
}
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(60deg);
  }

<div>Some div</div>

只需添加animation-play-state: paused;

div:hover{
    animation: rotate 2s, slide-up paused;
   -webkit-animation: rotate 2s, slide-up paused;
   -moz-animation: rotate 2s, slide-up paused;
}

只需在逗号后添加另一个动画。例如，如果我想创建一个将淡入（第一个动画）的盒子，然后它的阴影大小不断变化（第二个动画），那么这就是我要使用的CSS：

#box{
width: 300px;
height: 250px;
border: 2px solid white;
border-radius: 20px;
display: block;
margin-left: 500px;
margin-top: 190px;
background-color: rgb(0, 204, 228);
animation: animate1 3s 1, animate2 1s infinite;
text-align: center;}

@keyframes animate1{
0% {
    opacity: 0;
}
100%{
    opacity: 1;
}
}


 @keyframes animate2{
0%{box-shadow: 0px 0px 10px 0px gray; }
50%{box-shadow: 0px 0px 30px 0px gray; }
100%{box-shadow: 0px 0px 10px 0px gray; }}

...此外，如果你需要在一个元素上应用2个动画而不需要悬停它，你应该按照下面的例子进行双重调用。
首先，定义@keyframes名称和属性;在我们例子中是fadeIn和spin。
然后，按此方式进行：

animation-name: fadeIn, spin;
animation-duration: 1500ms, 2000ms;
animation-delay: 2000ms, 3000ms;

;）
ps：如果你需要更多的澄清或先进的技术，通过留在CSS只，并中肯地对这个问题，只要回答后（如果不死）我会回来尽快。