Keyframe animation :hover doesn't obey the "ease-out" part of the animation on mouse--CodePudding

I have a 3 chevron animation sequence set up for a back button I designed. The animation triggers on hover exactly the way I want it to but it doesn't respect the ease-out part of the animation property when I hover off of the button. I know that typically with CSS animations you fix this by putting the animation on the actual element and not the :hover state but the problem with that is that the keyframe animation triggers on page load and gets a little wonky on :hover. Is there a mouse-out or hover-out-like state that I could use so that when the user moves away from the button the animation eases out or even reverses? I tried adding animation-direction: reverse; property to the base elements but that doesn't do anything, probably because it doesn't know what animation I'm referring to because it's not present in the base elements for the reasons above. Do I possibly need some CSS or javascript to prevent the animation from triggering until the :hover state actually occurs and then I could place the animation in the base elements instead of the :hover state?

https://jsfiddle.net/astombaugh/L7k1r63f/54/

<body style="background-color: #214365">
  <div >
    <div >
      <div ></div>
      <div ></div>
      <div ></div>
    </div>
    Back
  </div>
</body>

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@700&display=swap');

.backBtn {
  font-family: Oswald, Univers, Helvetica Neue, Helvetica, Arial;
  display: inline-block;
  position: absolute;
  left: 4rem;
  font-weight: 700;
  width: auto;
  height: auto;
  color: white;
  background-color: transparent;
  padding: 0.2rem 0em 0.1rem 0em;
  margin: 0rem 0rem 0rem 0rem;
  text-align: center;
  text-decoration: none;
  font-size: 1.6em;
  word-spacing: normal;
  cursor: pointer;
}

.chevronContainer {
  display: inline-block;
  position: relative;
  transform: translateY(-1.3rem) translateX(-1rem);
}

.backBtnChevronTop {
  content: url(https://i.imgur.com/YHZi17i.png);
  filter: invert(1);
  position: absolute;
  opacity: 1;
  height: 1.33rem;
  width: 1.33rem;
}

.backBtnChevronMid {
  content: url(https://i.imgur.com/YHZi17i.png);
  filter: invert(1);
  position: absolute;
  opacity: 0;
  height: 1.33rem;
  width: 1.33rem;
  animation-direction: reverse;
}

.backBtnChevronFar {
  content: url(https://i.imgur.com/YHZi17i.png);
  filter: invert(1);
  position: absolute;
  opacity: 0;
  height: 1.33rem;
  width: 1.33rem;
  animation-direction: reverse;
}

.backBtn:hover .backBtnChevronMid {
  animation: animateChevronMid 0.6s ease-in-out;
  animation-fill-mode: forwards;
}

.backBtn:hover .backBtnChevronFar {
  animation: animateChevronFar 0.6s ease-in-out;
  animation-fill-mode: forwards;
}

@keyframes animateChevronTop {
  0% {
    transform: translateX(0rem);
    opacity: 0;
  }

  70%,
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}


@keyframes animateChevronMid {
  0% {
    transform: translateX(0);
    opacity: 0;
  }

  70%,
  100% {
    transform: translateX(-0.7rem);
    opacity: 1;
  }
}

@keyframes animateChevronFar {
  0% {
    transform: translateX(0);
    opacity: 0;
  }

  70%,
  100% {
    transform: translateX(-1.4rem);
    opacity: 1;
  }
}

CodePudding user response：

You can probably resolve this by adding the transition on element when there is no hover at the moment and tweak a little the keyframes. Like this:

.backBtn .backBtnChevronMid {
  animation: animateChevronMid2 0.6s ease-in-out;
  animation-fill-mode: forwards;
}

.backBtn .backBtnChevronFar {
  animation: animateChevronFar2 0.6s ease-in-out;
  animation-fill-mode: forwards;
}

@keyframes animateChevronMid2 {
  0% {
    transform: translateX(-0.7rem);
    opacity: 1;
  }

  70%,
  100% {
    transform: translateX(0);
    opacity: 0;
  }
}

@keyframes animateChevronFar2 {
  0% {
    transform: translateX(-1.4rem);
    opacity: 1;
  }

  70%,
  100% {
    transform: translateX(0);
    opacity: 0;
  }
}

this additional keyframes are exact opposite of the keyframes that you have done. And they do apply when you move your cursor from the element (so on hover off so to speak).

CodePudding user response：

Jacck is right and beat me to it.

You can use that, and add a fadeIn transition to the back button itself. It's hacky but put this on the back button:

  animation: fadeIn 0.6s ease-in-out;

And tweak the animation accordingly. It'll run once. If you don't want a fade just move the "stop" close to the end and this controls the container that holds the other animations so your whole effect won't show until it has loaded:

@keyframes fadeIn {
  0% {opacity:0;}
  95% {opacity: 0}
  100% {opacity:1;}
}