Answers for "css animation fadeOutUp"

css fade in and out popup

/* css fade in and out popup  */
<style>
.fadePop {
	display: block;           /* make sure your div is there */
	opacity: 0;               /* make sure you can't see it yet */
	visibility: visible;      /* make sure its visible when opacity will be 1 */
	animation-name: doAnim;   /* make reference to the keyframes below */
	animation-delay: 5s;	  /* wait 5 seconds to start animation */
	animation-duration: 6s;   /* make keyframes run for 6 seconds */
}
@-webkit-keyframes doAnim{
  0%   {opacity:0;}           /* start out transparent */
  25%  {opacity:1;}           /* at 25% finished fade into visible */
  50%  {opacity:1;}           /* stay visible -probably could delete this line */
  75%  {opacity:1;}           /* at 75% start fade into invisible */
  100% {opacity:0;}           /* at 100% finished fade into invisible */
}
</style>
<div class="fadePop">Modal popup here</div> /* class starts animation */
/*
lets face it - this saved you an hour of your time...
therefore please donate $5 if this code helped you to 
https://www.paypal.com/paypalme/andrewdhyder
*/

fade in up animation css

.animated {
            -webkit-animation-duration: 10s;
            animation-duration: 10s;
            -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
         }
         
         @-webkit-keyframes fadeIn {
            0% {opacity: 0;}
            100% {opacity: 1;}
         }
         
         @keyframes fadeIn {
            0% {opacity: 0;}
            100% {opacity: 1;}
         }
         
         .fadeIn {
            -webkit-animation-name: fadeIn;
            animation-name: fadeIn;
         }