元素在css動畫完成之前消失

Question

我正在爲延遲啓動的網站構建動畫工具提示。大約2秒後，它從頂部（不透明度和位置）進入屏幕。它顯示約5-8秒，然後我有一個jQuery函數「setTimeout」從DOM中刪除元素。

代碼如下：

CSS

.tooltip { 
    position: absolute; 
    background:gold; 
    padding-bottom: 15px; 
    right:20px; 
    top: 40px; 
    padding: 10px; 
    border-radius: 5px; 
    width: 220px; 
    z-index: 200; 
    opacity: 0; 
    display: inline-block; 
    animation: zippyTool 2s; 
    animation-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); 
    animation-delay: 2s; 
} 

@keyframes zippyTool { 
    0% { opacity: 0; top: -20px} 
    100% { opacity: 1; top: 40px; } 
} 

JS

setTimeout(function() { 
    $(".tooltip").fadeOut("slow"); 
    }, 10000); 

的問題是，工具提示元素似乎消失的時刻，動畫完成。就好像它恢復到了css中列出的.tooltip的原始不透明定義。

我已經在這裏https://jsfiddle.net/coolwebs/0kv3pe8z/1/

行爲的小提琴如何停止的提示元素消失的那一刻，該@keyframes CSS動畫完成？

Answer 1

我明明沒有搜索夠硬：

答案就在這裏指出Maintaining the final state at end of a CSS3 animation

我需要添加「轉發」以我的動畫聲明像這樣：

animation: zippyTool 2s forwards;