CSSキーフレームの位置を無効にする

Question

前のCSS @keyframeアニメーションを上書きしたい。 まず、単語が右側から来て、中央にとどまります。 ボタンをクリックするとすぐに、同じ単語が現在の位置から上に移動するようにアニメートされます。

しかし、単語は全く動かず、単にその位置に素早くジャンプします。 https://jsfiddle.net/vpfd672g/10/

<button type="button" class="test-button">Click Me!</button> 
<div id="window"> 
    <div class="container"> 
    <div class="word">Hello</div> 
    </div> 
</div> 

#window { 
    overflow: hidden; 
} 

.container { 
    text-align: center; 
    position: absolute; 
    width: 221px; 
    height: 50px; 
    margin: auto; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
    font-family: helvetica; 
    font-size: 20px; 
    z-index: 10; 
} 

.word { 
    position: relative; 
    animation: slide-in-right 2s ease-out forwards; 
    animation-delay: 0s; 
    opacity: 0; 
} 

@keyframes slide-in-right { 
    0% { 
    right: -100px; 
    } 
    100% { 
    right: 0px; 
    opacity: 1; 
    } 
} 

@keyframes slide-out-top { 
    100% { 
    top: -100px; 
    opacity: 0; 
    } 
} 

<script> 
let word = document.querySelector(".word"); 
let tstB = document.querySelector(".test-button"); 

tstB.addEventListener('click', doStuff); 

function doStuff() { 
    word.style.opacity = 1; 
    word.style.animation = "slide-out-top 2s forwards ease-out" 
} 
</script> 

それが問題を引き起こしているか、私は何を逃していますそれは何：

ここでフィドルですか？

Answer 1

slide-out-topには、以下のスタイルを追加する必要があります。

0% { 
    top: 0px; 
    } 

ここにはupdated fiddleがあります。