CSS 仅将鼠标悬停在按钮动画上，将鼠标悬停在动画外

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

CSS 仅将鼠标悬停在按钮动画上，将鼠标悬停在动画外

CSS ONLY Hover over button animate, hover out animate

html

css

animation

hover

jquery-animate