CSS ONLY 悬停在按钮动画上、悬停在动画上

Question

嗨，我试图创建导航抽屉按钮，并在悬停在盘旋上时要对其进行动画动画，而不是在盘旋盘旋时想知道是否只能在CSS中进行动画。这是我走了多远，当动画完成线条的规模更改为常规而不是动画的规模时，我也遇到了问题。

<button id="navbut" style="position: fixed;right: 0;">
  <div id="line1"></div>
  <div id="line2"></div>
  <div id="line3"></div>
</button>

#line1 {
  position         : relative;
  height           : 1px;
  width            : 3em;
  background       : rgb(255, 255, 255);
  margin-top       : 0.625rem;
  transform-origin : 100% 50% 0px;
  transform        : translate(0px);
  }
#line2 {
  position         : relative;
  height           : 1px;
  width            : 3em;
  background       : rgb(255, 255, 255);
  margin-top       : 0.725rem;
  transform-origin : 100% 50% 0px;
  transform        : translate(0px);
  }
#line3 {
  position         : relative;
  height           : 1px;
  width            : 3em;
  background       : rgb(255, 255, 255);
  margin-top       : 0.825rem;
  transform-origin : 100% 50% 0px;
  transform        : translate(0px);
  }
#navbut {
  background : none;
  width      : 3rem;
  top        : 0.rem;
  cursor     : pointer;
  border     : none;
  }
#navbut:hover>#line1 {
  animation: sha 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
  }
#navbut:hover>#line2 {
  animation: sh 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
  }
@keyframes sh {
  100% {transform: scale(0.75, 1); }
  }
@keyframes sha {
  100% {transform: scale(0.45, 1); }
  }

我希望，当鼠标完成后，动画结束以保持在该规模而不是恢复时，如果可能的话，请悬停

Answer 1

没有动画也是可以的。只需使用变换即可。

例子：

button{
    transform: scale(1);
    transition: transform ease 1s;
} 

button:hover{
    transform: scale(0.89);
}