在一个元素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，也可以使向上滑动动画只运行一次。

在下面的片段中，您会注意到我是如何在: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 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; }
}