How can I make css animation that make a button raise up from its current position once mouse hover on it and return to first position from its current position once the mouse leaves the button? I wrote some code but it doesn't works propely:

#register_event:not(:visited){
    animation: wiggleW 2s ease-out;
}

#register_event:hover{
    animation: wiggle 2s ease-out;
}

@keyframes wiggleW{
    0%{
        transform: translateY(-40px);
    }


    25%{
        transform:translateY(-30px);
    }
    50%{
        transform: translateY(-20px);
    }
    75%{
        transform: translateY(-10px);
    }
    100%{
        transform: translateY(0px);
    }
}

@keyframes wiggle{
    0%{
        transform: translateY(0px);
    }


    25%{
        transform:translateY(-10px);
    }
    50%{
        transform: translateY(-20px);
    }
    75%{
        transform: translateY(-30px);
    }
    100%{
        transform: translateY(-40px);
    }
}

CodePudding user response：

I would not suggest actually moving the button, as this can lead to user frustration, not to mention buggy action. Instead, creating a child element that moves while keeping the parent in the original location would be better.

Using Transition and :hover

here is an example using Transition, transform, and :hover

#animatedContent {
  background-color: #79A2E0;
  color: white;
  padding: 5px;
  transition: transform 0.2s ease;
}

#hoverArea {
  background-color: red;
  padding: 4px;
  width: 60px;
  margin: 10px;
  overflow: visible;
}

#hoverArea:hover>#animatedContent {
  transform: translateY(-30%);
}

<div id="hoverArea">
  <div id="animatedContent">
    Button
  </div>
</div>