html - 在一个元素上使用两个动画，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

原因:

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

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

解决方案:

即使在 :hover 时，确保动画实际上从未从元素中移除，您也可以使向上滑动动画只运行一次。在和animation-iteration-count为 1。

在下面的代码片段中，您会注意到我是如何保留 slide-up 的:hover 内的动画定义选择器也。这让浏览器看到这个动画一直存在，并且因为这个动画已经在加载时执行过一次，所以它不会再次执行它(因为迭代计数)。

(注意: 只是为了避免混淆 - 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>