在一个元素上使用两个动画，CSS

Question

我有两个动画：元素加载和悬停：

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

slide-up 动画在元素加载后运行，rotate 在元素悬停时运行。但是，现在元素在鼠标离开时向上滑动，我不知道如何防止这种情况。所以我想在悬停时关闭slide-up 动画。

旋转动画使用transform属性，上滑只是改变margins。

Answer 1

只需在逗号后添加另一个动画。例如，如果我想创建一个会淡入的盒子（第一个动画），然后它的阴影大小不断变化（第二个动画），那么这就是我要使用的 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; }}

Answer 2

原因：

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

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

解决方案：

您可以通过确保动画实际上从未从元素中删除使上滑动画只运行一次，即使:hover 已打开且@ 987654330@ 是 1。

在下面的 sn-p 中，您会注意到我如何在 :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>

Answer 3

只需添加一个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;
}