動畫@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

您可以通過設置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%) 
 
    } 
 
}

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