CSS ONLY Hover over button animate, hover out animate

hi im trying to create navigation drawer button and want to animate it when hovering over it and than animate when hovering out wondering if its possible to do it only in css. here is how far i have gone and also i ran into problem when animation is finished scale of line changes back to regular instead of what animation has.

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

i want that when mouse is over item after animation finishes to stay on that scale instead of reverting back, and if possible to animate hover out

>Solution :

It’s possible without animations. Just use transform.

Example:

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

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