how to stop the levitate animation when it hovers

.leon:hover {
    animation: none;
}

Might be what you are looking for.

Just add an animation pause to your svg hover

.svg:hover .shaddow,
.svg:hover .right-movment,
.svg:hover .left-movment,
.svg:hover .leon
{
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    -o-animation-play-state: paused;
     animation-play-state: paused;
}

Updated Pen

You can try this. for levitate

.svg:hover  .leon {
      -webkit-animation-play-state: paused; /* Safari 4.0 - 8.0 */
      animation-play-state: paused;
      cursor: pointer;
}

For All

 .svg:hover  .leon,
 .svg:hover .right-movment, .svg:hover .left-movment, .svg:hover  .shaddow {
       -webkit-animation-play-state: paused; /* Safari 4.0 - 8.0 */
       animation-play-state: paused;
       cursor: pointer;
}