jquery - 元素在 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;