/*base code*/
.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
  }
  .animated.infinite {
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
  }
  .animated.hinge {
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
  }
  /*the animation definition*/
  @-webkit-keyframes zoomIn {
    0% {
      opacity: 0;
      -webkit-transform: scale3d(.3, .3, .3);
      transform: scale3d(.3, .3, .3)
    }
    50% {
      opacity: 1
    }
  }
  @keyframes zoomIn {
    0% {
      opacity: 0;
      -webkit-transform: scale3d(.3, .3, .3);
      -ms-transform: scale3d(.3, .3, .3);
      transform: scale3d(.3, .3, .3)
    }
    50% {
      opacity: 1
    }
  }

  @keyframes slideinLeft {
    from {
      transform: translateX(100%);
    }
  
    to {
      transform: translateX(0%);
    }
  }

  @keyframes slideinRight {
    from {
      transform: translateX(-100%);
    }
  
    to {
      transform: translateX(0%);
    }
  }

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

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

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