0

I am building an animated tooltip for a website that has a delayed start. After approx 2s, it animates into the screen from the top (opacity and position). It displays for about 5-8 seconds and then I have a jQuery function "setTimeout" to remove the element from the DOM.

Code is below:

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);

The problem is that the tooltip element seems to disappear the moment that the animation is complete. It's as if it reverts back to the original opacity definition for .tooltip that was listed in the css.

I have made a fiddle of the behaviour here https://jsfiddle.net/coolwebs/0kv3pe8z/1/

How do I stop the tooltip element disappearing the moment that the @keyframes css animation is complete?

Ryan Coolwebs
  • 1,611
  • 5
  • 22
  • 44

1 Answers1

1

I obviously did not search hard enough:

Answer is noted here Maintaining the final state at end of a CSS3 animation

I needed to add 'forwards' to my animation declaration like thus:

animation: zippyTool 2s forwards;
Community
  • 1
  • 1
Ryan Coolwebs
  • 1,611
  • 5
  • 22
  • 44