.reveal {
    overflow:hidden;
    opacity: 0;
    transform: translateY(300px);
    transition: all 0.7s ease;
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
/*   transform: scale(2, 2);   */
    }

 
    
 /* Bounce in from Left   */   
.bounce-in-left {
  animation: bounce-in-animations-left ease 1s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  animation-fill-mode:forwards; /*when the spec is finished*/
}

@keyframes bounce-in-animations-left{
  0% {
    opacity:0;
    transform:  translate(-1500px,0px)  ;
  }
  60% {
    opacity:1;
    transform:  translate(30px,0px)  ;
  }
  80% {
    transform:  translate(-10px,0px)  ;
  }
  100% {
    opacity:1;
    transform:  translate(0px,0px)  ;
  }
}

 /* Bounce in from Right   */   
.bounce-in-right {
  animation: bounce-in-animations-right ease 1s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  animation-fill-mode:forwards; /*when the spec is finished*/
}

@keyframes bounce-in-animations-right{
  0% {
    opacity:0;
    transform:  translate(1500px,0px)  ;
  }
  60% {
    opacity:1;
    transform:  translate(-30px,0px)  ;
  }
  80% {
    transform:  translate(10px,0px)  ;
  }
  100% {
    opacity:1;
    transform:  translate(0px,0px)  ;
  }
}


/*  _______________________________________________________________________________________ */

/* Background image fade */
/* Usage  <div id="bg">  */

  #bg {
    -webkit-animation: myfirst 5s ; /* Chrome, Safari, Opera */
    animation: myfirst 5s ;
  }

  /* Chrome, Safari, Opera */
  @-webkit-keyframes myfirst {
    from {opacity: 0.2;}
    to {opacity: 1;}
  }

  /* Standard syntax */
  @keyframes myfirst {
    from {opacity: 0.2;}
    to {opacity: 1;}
  }