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，但我已将其明确用于解释。这不是主要的原因，但只是一个额外的步骤，以确保其值不会弄乱解决方案。）

＆＃13;

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);
  }

＆＃13;

<div>Some div</div>

＆＃13;

Answer 2

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

Answer 3

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

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

3 个答案: