Animation @keyframes slide top and stay

Question

I simply want the #upmenu to stay up outside the viewport once the animation is ended.

I'm struggling to understand what I am doing wrong.

Thanks for your help.

$(document.body).ready(function() {
  $("#num").hover(function() {
    $("#upmenu").toggleClass("toptop"), $("#fp-nav").toggleClass("top")
  })
})

#upmenu{
  position:fixed;
  top:0;
}
.toptop {
  -webkit-animation: slide-out-top 1.5s cubic-bezier(.215, .61, .355, 1);
  animation: slide-out-top 1.5s cubic-bezier(.215, .61, .355, 1)
}
@-webkit-keyframes slide-out-top {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
    to {
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%)
    }
}
@keyframes slide-out-top {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
    to {
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%)
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id=upmenu>1234567890</div><br><br>
<div id=num>HOVER HERE</div>

Answer 1

You can achieve this by setting the animation-fill-mode to forwards. In the case of your code where you use the animation shorthand rule, it's the last property in the list on each line:

$(document.body).ready(function() {
  $("#num").hover(function() {
    $("#upmenu").toggleClass("toptop"), $("#fp-nav").toggleClass("top")
  })
})

#upmenu {
  position: fixed;
  top: 0;
}
.toptop {
  -webkit-animation: slide-out-top 1.5s cubic-bezier(.215, .61, .355, 1) forwards;
  animation: slide-out-top 1.5s cubic-bezier(.215, .61, .355, 1) forwards;
}
@-webkit-keyframes slide-out-top {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0)
  }
  to {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%)
  }
}
@keyframes slide-out-top {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0)
  }
  to {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%)
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id=upmenu>1234567890</div>
<br>
<br>
<div id=num>HOVER HERE</div>