-1

I am trying to get some text to fadeIn then fadeOut again after a delay. However, I want a delay on the fadeIn also.

I am aware this can be done with CSS Keyframes? But I wouldn't have any clue how to start and everything I have researched has been only one animation (animate in).

Therefore, I am trying this in JQuery:

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

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

});

And this HTML/CSS:

<section class="helper" style="display: none;">
    <h2 id="helper">Filler Text</h2>
</section>
JShepherd
  • 115
  • 1
  • 1
  • 13

1 Answers1

1

For this kind of task it's better to use a simple CSS animation

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

@keyframes fade {
  60%, 100% { opacity: 0;}
  70%, 90%  { opacity: 1 }
}
Fabrizio Calderan
  • 120,726
  • 26
  • 164
  • 177