アニメーション@keyframes slide top and stay

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

あなたはforwardsにanimation-fill-modeを設定することによって、これを達成することができます。あなたは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>