Federico Ferrari Federico Ferrari - 24 days ago 13
Javascript Question

Animation @keyframes slide top and stay

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

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>

Comments