当你停止在动画上悬停时，有更好的解决方案可以反转动画吗

Question

我想让工具栏在停止悬停后慢慢回落。代码可以工作，但每当重新加载页面时，动画都会运行一次。虽然这不是一个大问题，但我想知道是否有更好的解决方案？我在这里有一些html和css示例来帮助解决方案。

<div class="AGS">
<div class="a" onclick="location.href='PLACEHOLDER.html';"style="cursor: pointer;"> 
<a>PLACEHOLDER</a></div>
<div class="a" onclick="location.href='PLACEHOLDER.html';"style="cursor: pointer;">
<a>PLACEHOLDER</a></div>
<div class="a" onclick="location.href='PLACEHOLDER.html';"style="cursor: pointer;">
<a>PLACEHOLDER</a></div>
<div class="a" onclick="location.href='PLACEHOLDER.html';"style="cursor: pointer;">
<a>PLACEHOLDER</a></div>
<div class="a" onclick="location.href='PLACEHOLDER.html';"style="cursor: pointer;">
<a>PLACEHOLDER</a></div>
<div class="a" onclick="location.href='PLACEHOLDER.html';"style="cursor: pointer;">
<a>PLACEHOLDER</a></div>
<div class="a" onclick="location.href='PLACEHOLDER.html';"style="cursor: pointer;">
<a>PLACEHOLDER</a></div>
<div class="a" onclick="location.href='PLACEHOLDER.html';"style="cursor: pointer;">
<a>PLACEHOLDER</a></div>
<div class="a" onclick="location.href='PLACEHOLDER.html';"style="cursor: pointer;">
<a>PLACEHOLDER</a></div>
<div class="a" onclick="location.href='PLACEHOLDER.html';"style="cursor: pointer;">
<a>PLACEHOLDER</a></div>
</div>

然后css

.a {
display: block;
border: 5px solid black;
margin:-4.4444444444px 0 0 0;
padding: 1px;
text-align: left;
background-color: rgba(0,0,0,0.3);
color: black;
text-shadow: 0px 0px 0px black;
place-items: left;
animation-name: ano;
animation-duration: .1s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
animation-direction: alternate;
animation-timing-function: ease-in; 
}
.a:hover {
color: black;
background-color: rgba(255,255,255,0.1);
animation-name: an;
animation-duration: .1s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
animation-direction: alternate;
animation-timing-function: ease-in;
}
@keyframes an {
from {
margin:-4.4444444444px 0 0 0;
}
to {
margin: -4.4444444444px -5px 0 0px;
border-left: 10px solid black;
}
}
@keyframes ano {
from {
margin: -4.4444444444px -5px 0 0px;
border-left: 10px solid black;
}
to {
margin:-4.4444444444px 0 0 0;
border-left: 5px solid black;
}
}
.AGS {
padding: 0px 0px 0px 0px;
width: 250px;
margin: 0px 0px 0px 0px;
}

Answer 1

如果只在两个状态之间制作:hover动画，则可以使用简单的transition而不是keyframes。

.a {
display: block;
border: 5px solid black;
margin: -4.4444444444px 0 0 0;
padding: 1px;
text-align: left;
background-color: rgba(0, 0, 0, 0.3);
color: black;
text-shadow: 0px 0px 0px black;
place-items: left;
transition: .1s ease-in;
}
.a:hover {
color: black;
background-color: rgba(255, 255, 255, 0.1);
margin: -4.4444444444px -5px 0 0px;
border-left: 10px solid black;
}
.AGS {
padding: 0px 0px 0px 0px;
width: 250px;
margin: 0px 0px 0px 0px;
}

<div class="AGS">
<div class="a" onclick="location.href='PLACEHOLDER.html';" style="cursor: pointer;">
<a>PLACEHOLDER</a></div>
<div class="a" onclick="location.href='PLACEHOLDER.html';" style="cursor: pointer;">
<a>PLACEHOLDER</a></div>
<div class="a" onclick="location.href='PLACEHOLDER.html';" style="cursor: pointer;">
<a>PLACEHOLDER</a></div>
<div class="a" onclick="location.href='PLACEHOLDER.html';" style="cursor: pointer;">
<a>PLACEHOLDER</a></div>
<div class="a" onclick="location.href='PLACEHOLDER.html';" style="cursor: pointer;">
<a>PLACEHOLDER</a></div>
<div class="a" onclick="location.href='PLACEHOLDER.html';" style="cursor: pointer;">
<a>PLACEHOLDER</a></div>
<div class="a" onclick="location.href='PLACEHOLDER.html';" style="cursor: pointer;">
<a>PLACEHOLDER</a></div>
<div class="a" onclick="location.href='PLACEHOLDER.html';" style="cursor: pointer;">
<a>PLACEHOLDER</a></div>
<div class="a" onclick="location.href='PLACEHOLDER.html';" style="cursor: pointer;">
<a>PLACEHOLDER</a></div>
<div class="a" onclick="location.href='PLACEHOLDER.html';" style="cursor: pointer;">
<a>PLACEHOLDER</a></div>
</div>

Answer 2

只需添加.class:not(:hover)。所以，若元素并没有悬停，您可以设置应该做什么。