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

CodePudding user response：

It's possible without animations. Just use transform.

Example:

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

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