元素在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动画完成时停止工具提示元素的消失？

Answer 1

我显然找得不够努力：

答案记在这里，Maintaining the final state at end of a CSS3 animation

我需要在动画声明中添加“转发”，如下所示：

animation: zippyTool 2s forwards;