Javascript 动画@关键帧滑动顶部并停留

我只是希望动画结束后#up菜单保持在视口外

我正在努力理解我做错了什么

谢谢你的帮助

$（document.body）.ready（function（）{
$（“#num”）.hover（函数（）{
$（“#上菜单”）.toggleClass（“顶部”），$（“#fp nav”）.toggleClass（“顶部”）
})
})

#上菜单{
位置：固定；
排名：0；
}
.托普托普{
-webkit动画：滑出顶部1.5s立方贝塞尔（.215、.61、.355、1）；
动画：滑出顶部1.5s立方贝塞尔（.215、.61、.355、1）
}
@-webkit关键帧从顶部滑出{
0% {
-webkit转换：translateY（0）；
变换：translateY（0）
}
到{
-webkit转换：translateY（-100%）；
转换：translateY（-100%）
}
}
@关键帧从顶部滑出{
0% {
-webkit转换：translateY（0）；
变换：translateY（0）
}
到{
-webkit转换：translateY（-100%）；
转换：translateY（-100%）
}
}

1234567890


将鼠标悬停在此处

您可以通过将

动画填充模式

设置为

向前

来实现此目的。对于使用

动画

速记规则的代码，它是每行列表中的最后一个属性：

$（document.body）.ready（function（）{
$（“#num”）.hover（函数（）{
$（“#上菜单”）.toggleClass（“顶部”），$（“#fp nav”）.toggleClass（“顶部”）
})
})

#上菜单{
位置：固定；
排名：0；
}
.托普托普{
-webkit动画：向前滑出顶部1.5s立方贝塞尔（.215、.61、.355、1）；
动画：向前滑动顶部1.5s立方贝塞尔（.215、.61、.355,1）；
}
@-webkit关键帧从顶部滑出{
0% {
-webkit转换：translateY（0）；
变换：translateY（0）
}
到{
-webkit转换：translateY（-100%）；
转换：translateY（-100%）
}
}
@关键帧从顶部滑出{
0% {
-webkit转换：translateY（0）；
变换：translateY（0）
}
到{
-webkit转换：translateY（-100%）；
转换：translateY（-100%）
}
}

1234567890




停在这里

非常感谢Rory，我不知道那家酒店。