title: Keyframe animation :hover doesn't obey the "ease-out" part of the animation on mouse-out
body: <p>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 <code>ease-out</code> 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 <code>:hover</code> state but the problem with that is that the keyframe animation triggers on page load and gets a little wonky on <code>:hover</code>. 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 <code>animation-direction: reverse;</code> 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 <code>:hover</code> state actually occurs and then I could place the animation in the base elements instead of the <code>:hover</code> state?</p>
  <p><a href="https://jsfiddle.net/astombaugh/L7k1r63f/54/" rel="nofollow noreferrer">https://jsfiddle.net/astombaugh/L7k1r63f/54/</a></p>
  <pre><code>&lt;body style=&quot;background-color: #214365&quot;&gt;
    &lt;div class=&quot;backBtn&quot;&gt;
      &lt;div class=&quot;chevronContainer&quot;&gt;
        &lt;div class=&quot;backBtnChevronTop&quot;&gt;&lt;/div&gt;
        &lt;div class=&quot;backBtnChevronMid&quot;&gt;&lt;/div&gt;
        &lt;div class=&quot;backBtnChevronFar&quot;&gt;&lt;/div&gt;
      &lt;/div&gt;
      Back
    &lt;/div&gt;
  &lt;/body&gt;
  
  </code></pre>
  <pre><code>@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@700&amp;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;
    }
  }
  </code></pre>