JQuery fadeIn然后fadeOut延迟 - 不工作

Question

我试图让一些文字在fadeIn然后在延迟后再次fadeOut。但是，我也想延迟fadeIn。

我知道这可以用CSS关键帧完成吗？但是我不知道如何开始，我研究的所有东西都只有一个动画（动画片）。

因此，我在JQuery中尝试这个：

$(document).ready(() => {

    $(window).on('load', () => {
        $('.helper').delay(3000).fadeIn(); {
            $(this).delay(6000).fadeOut();
        }
    });

});

这个HTML / CSS：

<section class="helper" style="display: none;">
    <h2 id="helper">Filler Text</h2>
</section>

Answer 1

对于这种任务，最好使用简单的CSS动画

.helper { 
  opacity: 0; 
  animation: fade 10s;
  will-change: opacity; }

@keyframes fade {
  60%, 100% { opacity: 0;}
  70%, 90%  { opacity: 1 }
}