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

I want to have the bar to slowly fall back down once I stop hovering over it. The code works but whenever the page is reloaded, the animation runs once. While this isn't a huge issue, I want to know if there is a better solution to the problem? I have some html and css samples here to help with the solution.

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

Then the 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;
        }

CodePudding user response：

If you're making just a :hover animation between two states, you can use a simple transition instead of 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 >
  <div  onclick="location.href='PLACEHOLDER.html';" style="cursor: pointer;">
    <a>PLACEHOLDER</a></div>
  <div  onclick="location.href='PLACEHOLDER.html';" style="cursor: pointer;">
    <a>PLACEHOLDER</a></div>
  <div  onclick="location.href='PLACEHOLDER.html';" style="cursor: pointer;">
    <a>PLACEHOLDER</a></div>
  <div  onclick="location.href='PLACEHOLDER.html';" style="cursor: pointer;">
    <a>PLACEHOLDER</a></div>
  <div  onclick="location.href='PLACEHOLDER.html';" style="cursor: pointer;">
    <a>PLACEHOLDER</a></div>
  <div  onclick="location.href='PLACEHOLDER.html';" style="cursor: pointer;">
    <a>PLACEHOLDER</a></div>
  <div  onclick="location.href='PLACEHOLDER.html';" style="cursor: pointer;">
    <a>PLACEHOLDER</a></div>
  <div  onclick="location.href='PLACEHOLDER.html';" style="cursor: pointer;">
    <a>PLACEHOLDER</a></div>
  <div  onclick="location.href='PLACEHOLDER.html';" style="cursor: pointer;">
    <a>PLACEHOLDER</a></div>
  <div  onclick="location.href='PLACEHOLDER.html';" style="cursor: pointer;">
    <a>PLACEHOLDER</a></div>
</div>

CodePudding user response：

Simply add .class:not(:hover). So you can set what should be done if element isnt hovering.