Question

我正在为一个延迟启动的网站构建动画工具提示。大约2秒后，它从顶部动画到屏幕（不透明度和位置）。它显示大约5-8秒然后我有一个jQuery函数＆＃34; setTimeout＆＃34;从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

我需要添加＆＃39;前进＆＃39;像我这样的动画声明：

animation: zippyTool 2s forwards;

元素在css动画完成之前消失

1 个答案: