Up and Down & Fade Out Animation

Question

How can I have the animation playing only for 5 seconds then it fades out?

Here is the sample JSFIDDLE:

The CSS

@keyframes bounce { 
    0%, 20%, 50%, 80%, 100% {transform: translateY(0);} 
    40% {transform: translateY(-30px);} 
    60% {transform: translateY(-15px);} 
} 

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

Answer 1

Try this code....

@import "compass/css3";

@include keyframes(bounce) {
    0%, 10%, 20%, 30%, 40%, 60%, 70%, 80% {
    @include transform(translateY(0));
  }
    15%, 65% {
    @include transform(translateY(-30px));
  }
    25%,75% {
    @include transform(translateY(-15px));
  }
  80%{
    opacity: 1;
  }
  100%{
     opacity: 0;
  }
  0%{
    opacity: 1;
  }
}


body {
  background: black;
}

.arrow {
  position: fixed;
  bottom: 0;
  left: 50%;
  margin-left:-20px;
  width: 40px;
  height: 40px;
  opacity: 0;
}

.bounce {
  @include animation(bounce 5s);
}

Here is the helpful link to understand more clearly:- http://codepen.io/anon/pen/gpRRVy

Answer 2

#animated-example {
  margin: 40px auto;
  width: 100px;
  -webkit-box-shadow: 0 8px 6px -6px black;
  -moz-box-shadow: 0 8px 6px -6px black;
  box-shadow: 0 8px 6px -6px black;
  text-align: center;
  padding: 20px;
}
.animated {
  -webkit-animation-name: bounceIn;
  -webkit-animation-duration: 4s;
  -webkit-animation-iteration-count: 5;
  -webkit-animation-fill-mode: forwards;
  animation-name: bounceIn;
  animation-duration: 4s;
  animation-iteration-count: 5;
  animation-fill-mode: forwards;
}
/*
 * Animation for webkit
*/

@-webkit-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-30px);
  }
  60% {
    -webkit-transform: translateY(-15px);
  }
}
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
  60% {
    transform: translateY(-15px);
  }
}
/*
 * Adding the animation to our element
*/

.bounce {
  -webkit-animation-name: bounce;
  animation-name: bounce;
}
.fadeOutDiv {
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -ms-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  /*animation-delay*/
  -webkit-animation-delay: 15s;
  -moz-animation-delay: 15s;
  -ms-animation-delay: 15s;
  -o-animation-delay: 15s;
  animation-delay: 15s;
  /*animation-duration*/
  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  -ms-animation-duration: 1s;
  -o-animation-duration: 1s;
  animation-duration: 1s;
  /*animation-iteration-count*/
  -webkit-animation-iteration-count: 1;
  -moz-animation-iteration-count: 1;
  -ms-animation-iteration-count: 1;
  -o-animation-iteration-count: 1;
  animation-iteration-count: 1;
  /*animation-name*/
  -webkit-animation-name: fadeIn;
  -moz-animation-name: fadeIn;
  -ms-animation-name: fadeIn;
  -o-animation-name: fadeIn;
  animation-name: fadeIn;
}
@-moz-keyframes fadeIn {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@-ms-keyframes fadeIn {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@-keyframes fadeIn {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

<div class="fadeOutDiv">
  <div style="background-color:#D32F2F;" id="animated-example" class="animated bounce">I'm Bouncing!</div>
</div>

Well, Because css is very limited, We have to do fade out Animation on another div like so:

HTML Code:

<div class="fadeOutDiv">
<div style="background-color:#D32F2F;" id="animated-example" class="animated bounce">I'm Bouncing!</div>
</div>

In css beside your code all what you need is to add the fade out animation style and animation-delay:15s; you need to set delay seconds more then seconds of animation button duration for example if you want animation button up and down 3 times each time 5 seconds so 3*5=15 so you need to set delay for more then 15 seconds as in the code below:

Css Code:

#animated-example {
    margin:40px auto;
    width:100px;
    -webkit-box-shadow: 0 8px 6px -6px black;
       -moz-box-shadow: 0 8px 6px -6px black;
            box-shadow: 0 8px 6px -6px black;
            text-align: center;
            padding: 20px;
    }


.animated { 
    -webkit-animation-name: bounceIn;
    -webkit-animation-duration: 4s;
    -webkit-animation-iteration-count: 5;
    -webkit-animation-fill-mode: forwards;

    animation-name: bounceIn;
    animation-duration: 4s;
    animation-iteration-count: 5;
    animation-fill-mode: forwards;
} 

/*
 * Animation for webkit
*/
@-webkit-keyframes bounce { 
    0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);} 
    40% {-webkit-transform: translateY(-30px);} 
    60% {-webkit-transform: translateY(-15px);} 
} 

@keyframes bounce { 
    0%, 20%, 50%, 80%, 100% {transform: translateY(0);} 
    40% {transform: translateY(-30px);} 
    60% {transform: translateY(-15px);} 
} 

/*
 * Adding the animation to our element
*/
.bounce { 
    -webkit-animation-name: bounce; 
    animation-name: bounce; 
}

.fadeOutDiv{
  -webkit-animation-fill-mode:forwards;
     -moz-animation-fill-mode:forwards;
      -ms-animation-fill-mode:forwards;
       -o-animation-fill-mode:forwards;
          animation-fill-mode:forwards;

  /*animation-delay*/
  -webkit-animation-delay:15s;
     -moz-animation-delay:15s;
      -ms-animation-delay:15s;
       -o-animation-delay:15s;
          animation-delay:15s;

    /*animation-duration*/
    -webkit-animation-duration:1s;
       -moz-animation-duration:1s;
        -ms-animation-duration:1s;
         -o-animation-duration:1s;
            animation-duration:1s;

  /*animation-iteration-count*/
  -webkit-animation-iteration-count:1;
     -moz-animation-iteration-count:1;
      -ms-animation-iteration-count:1;
       -o-animation-iteration-count:1;
          animation-iteration-count:1;

  /*animation-name*/
  -webkit-animation-name:fadeIn;
     -moz-animation-name:fadeIn;
      -ms-animation-name:fadeIn;
       -o-animation-name:fadeIn;
          animation-name:fadeIn;
}

 @-moz-keyframes fadeIn {
      from {opacity:1;}
      to {opacity:0;} 
    }

    @-webkit-keyframes fadeIn {
      from {opacity:1;}
      to {opacity:0;}
    }

     @-ms-keyframes fadeIn {
      from {opacity:1;}
      to {opacity:0;}
    }

 @-keyframes fadeIn {
      from {opacity:1;}
      to {opacity:0;}
    }

You can play with /animation-duration/ and /animation-delay/ as you like. Please let me know if you have any question.