Stay hidden after fadeout

Question

I have a logo in a preloader div that I want to fade out Up after a call. The logo does fadeoutup but becomes visible after it's faded out completely. What I want is to keep it faded out or make it display none with CSS only if possible I can use jquery but rather not.

&.preloader-remove{
            -webkit-animation: fadeOutUp 1s;
            animation: fadeOutUp 1s;
        }

Css Animation

@-webkit-keyframes fadeOutUp {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}

@keyframes fadeOutUp {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    -ms-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}

.fadeOutUp {
  -webkit-animation-name: fadeOutUp;
  animation-name: fadeOutUp;
}

I meant the css for the animation. You should still add it to your question even if you got an answer so that others can see if they're making the same mistake. — 3ocene, Jul 02 '15 at 17:54

score 2 · Accepted Answer · answered Jun 30 '15 at 01:09

2

Try using a css transition rather than animation:

&.preloader-remove {
    position: relative;
    top: 50px;
    opacity: 0;
    -webkit-transition: top 1s, opacity 1s;
    transition: top 1s, opacity 1s;
}

answered Jun 30 '15 at 01:09

3ocene

2,102
1
15
30

Stupid me I just had to add the opacity to 0... Thanks man! – Raymond the Developer Jul 02 '15 at 17:37

score 1 · Answer 2 · answered Jun 30 '15 at 01:06

1

From the jquery api:http://api.jquery.com/fadeout/

.fadeOut() Description: Hide the matched elements by fading them to transparent.

$( "#clickme" ).click(function() {
  $( "#book" ).fadeOut( "slow", function() {
    // Animation complete.
  });
});

answered Jun 30 '15 at 01:06

orangerblue

65
10

1

By using this the element doesn't move up. I got it fixed by using the solution below. Thanks anyway! – Raymond the Developer Jul 02 '15 at 17:38

Stay hidden after fadeout

2 Answers2