关键帧动画：悬停在鼠标移开时不遵守动画的 "ease-out" 部分

Question

我为我设计的后退按钮设置了一个 3 V 形动画序列。动画完全按照我想要的方式在悬停时触发，但是当我将鼠标悬停在按钮上时，它不尊重动画属性的 ease-out 部分。我知道通常使用 CSS 动画可以通过将动画放在实际元素上而不是 :hover 状态来解决这个问题，但问题是关键帧动画在页面加载时触发并变得有点不稳定在 :hover 上。是否有我可以使用的类似鼠标悬停或悬停的状态，以便当用户离开按钮时动画缓和甚至反转？我尝试将 animation-direction: reverse; 属性添加到基本元素，但这没有做任何事情，可能是因为它不知道我指的是什么动画，因为它不存在于基本元素中多于。我是否可能需要一些 CSS 或 javascript 来防止动画在 :hover 状态实际发生之前触发，然后我可以将动画放在基本元素中而不是 :hover状态？

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

<body style="background-color: #214365">
  <div class="backBtn">
    <div class="chevronContainer">
      <div class="backBtnChevronTop"></div>
      <div class="backBtnChevronMid"></div>
      <div class="backBtnChevronFar"></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;
  }
}

Answer 1

您可以通过在当前没有悬停时在元素上添加过渡并稍微调整关键帧来解决此问题。像这样：

.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;
  }
}

这些额外的关键帧与您所做的关键帧完全相反。当您将光标从元素上移开时，它们确实适用（可以这么说，悬停）。

Answer 2

Jacck 是对的，他比我早。

您可以使用它，并向后退按钮本身添加淡入过渡。这很老套，但把它放在后退按钮上：

  animation: fadeIn 0.6s ease-in-out;

并相应地调整动画。它会运行一次。如果您不想要淡入淡出，只需将“停止”移动到靠近末尾，这将控制包含其他动画的容器，因此您的整个效果在加载之前不会显示：

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

关键帧动画：悬停在鼠标移开时不遵守动画的 "ease-out" 部分

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

html

javascript

css

animation