一旦您停止将鼠标悬停在动画上，是否有更好的动画反转解决方案？

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)。所以你可以设置如果元素没有悬停应该做什么。

一旦您停止将鼠标悬停在动画上，是否有更好的动画反转解决方案？

Is there a better solution to having an animation reverse once you stop hovering over it?

css

animation