动画@keyframes滑动顶部并留下来

Question

一旦动画结束，我只想让#upmenu保持在视口之外。

我很难理解我做错了什么。

感谢您的帮助。

$(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

您可以将{ "data": [ { "FISCAL_YEAR_END": null, "HOME_COUNTRY": null }, { "FISCAL_YEAR_END": null, "HOME_COUNTRY": "10" }, 设置为animation-fill-mode来实现此目的。对于使用forwards速记规则的代码，它是每行上列表中的最后一个属性：

animation

$(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%)
  }
}